Раздел javascript не работает на клике

Question

Я написал часть Javascript, в которой одна кнопка меню используется, чтобы изменить как внешний вид страницы, так и href's самого меню. Я попытался создать два «слоя» этого (иначе, снова измените его при повторном нажатии), но по какой-то причине успешно вызвано только первое изменение. Ни один из второго фрагмента Javascript вообще не работает при нажатии # черной кнопки, ни изменения цвета, ни изменения href, несмотря на то, что почти идентичный код над ним работает нормально. Почему этот кусок скрипта не работает по команде?

HTML:

<a id="advice-button-link" href="ln-advice.html" target="ln-content"> 
<div class="button" id="advice-button"></div> 
</a> 

<a id="poem-button-link" href="ln-poems.html" target="ln-content"> 
<div class="button" id="poem-button"></div> 
</a> 

<a id="pastel-button-link" href="pastel-phrases.html" target="ln-content"> 
<div class="button" id="pastel-button">deeper</div> 
</a> 

Javascript:

$("#pastel-button").click(function() { 
    document.body.style.backgroundColor="#4444bb" 
     $("#advice-button").attr("id","pastel-button-1"); 
     $("#advice-button-link").attr("id","pastel-button-1-link"); 
     $("#poem-button").attr("id","pastel-button-2"); 
     $("#poem-button-link").attr("id","pastel-button-2-link"); 
     $("#pastel-button").attr("id","black-button"); 
     $("#pastel-button-link").attr("id","black-button-link"); 
     $("#pastel-button-1-link").attr("href","pastel-phrases.html"); 
     $("#pastel-button-2-link").attr("href","pastel-phrases.html"); 
     $("#black-button").addClass('black-button-class'); 
}); 

$("#black-button").click(function() { 
    document.body.style.backgroundColor="black" 
     $("#pastel-button-1").attr("id","black-button-1"); 
     $("#pastel-button-1-link").attr("id","black-button-1-link"); 
     $("#pastel-button-2").attr("id","black-button-2"); 
     $("#pastel-button-2-link").attr("id","black-button-2-link"); 
     $("#black-button-1-link").attr("href","black-phrases.html"); 
     $("#black-button-2-link").attr("href","black-phrases.html"); 
     $("#black-button-link").attr("href","black-phrases.html"); 
}); 

EDIT: Для того, чтобы избавиться от изменения идентификаторов, я придумал новый метод, который использует общие идентификаторы для каждой кнопки и просто добавляет/отсоединение классы для изменения внешнего вида и изменения href's, основанные на том, что класс «Кнопка Switcher» (ранее кнопка пастелирования, черная кнопка). По-прежнему не работает, я полагаю, по той же причине (изначально он не имеет этого класса при загрузке скрипта.) Является ли это еще шагом в правильном направлении?

$("#switcher-button").click(function() { 
    document.body.style.backgroundColor="#4444bb"; 
     $("#content-button-1-link").attr("href","pastel-phrases.html"); 
     $("#content-button-2-link").attr("href","pastel-phrases.html"); 
     $("#content-button-1").addClass('pastel-1'); 
     $("#content-button-1").removeClass('original-button-1'); 
     $("#content-button-2").addClass('pastel-2'); 
     $("#content-button-2").removeClass('original-button-2'); 
     $(this).addClass('black-switcher'); 
     $(this).removeClass('original-switcher-button'); 
}); 

$(".black-switcher").click(function() { 
    document.body.style.backgroundColor="black"; 
     $("#content-button-1-link").attr("href","black-phrases.html"); 
     $("#content-button-2-link").attr("href","black-phrases.html"); 
     $("#switcher-button-link").attr("href","black-phrases.html"); 
}); 

Answer 1

$("#black-button") не существует в то время, когда выполняется ваш код.

Вы изменяете идентификатор элемента, чтобы соответствовать ему, но это после, вы пытались добавить прослушиватель событий.

Изменение идентификаторов элементов - это просто плохая идея и уже вызывает проблемы. События получить связаны с элементами, а не их ID или класса

При изменении идентификатора pastel-button в black-button, что не приведет к удалению слушателя событий, который изначально был создан для элемента ссылочного первоначально pastel-button

Вы могли бы сделать все это работать, используя события делегации, но я предположил бы, что только собираюсь, чтобы замаскировать плохую практику включения идентификаторов в первую очередь

EDIT: возможно упрощением подход

Дайте основные звенья общего класс и дополнительный атрибут данных, который может быть использован для переключения класса на корпусе

<a class="link-button" 
    id="advice-button-link" 
    href="ln-advice.html" 
    target="ln-content" 
    data-body-class="advice"><!-- used to switch class on body --> 
    <div class="button" id="advice-button"></div> 
</a> 

Используйте этот класс, чтобы создать один обработчик событий. В этом классе изменения обработчика на теле и на активной кнопки:

$('.link-button').click(function(){ 
    var $link = $(this).addClass('active'); 
    $('.link-button.active').not(this).removeClass('active'); 
    $('body').removeAttr('class').addClass($link.data('body-class')); 
}); 

Теперь с этими классами тела писать правила CSS, которые делают все, что необходимо в UI, основанный на использовании класса тела в качестве ведущего селектора