部分javascript在单击时未运行

我编写了一段Javascript，其中一个菜单按钮用于更改页面的外观和菜单本身的href。我尝试创建两个“层”（又名，再次单击时再次更改），但由于某些原因，仅成功调用了第一个更改。当按下#black按钮时，第二块Javascript似乎根本没有运行，颜色和href都没有变化，尽管上面几乎相同的代码工作正常。为什么这段脚本没有按命令运行

HTML:

编辑：为了避免更改ID，我提出了一种新方法，对每个按钮使用通用ID，只添加/删除类以更改外观，并根据“切换按钮”（以前的粉彩按钮，黑色按钮）的类更改href。仍然不起作用，我想是因为同样的原因（加载脚本时它最初没有这个类）这仍然是正确的方向吗

$("#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");
});

$（“#黑色按钮”）

在代码运行时不存在

更改元素ID以匹配它，但这是在尝试添加事件侦听器之后进行的

更改元素ID只是一个坏主意，已经给您带来了问题。事件绑定到元素，而不是它们的ID或类

将

pastel按钮的id更改为
black按钮时，不会删除最初为
pastel按钮引用的元素创建的事件侦听器

您可以通过使用事件委派来实现这一切，但我认为这只会掩盖切换ID的错误做法

编辑：一种可能的简化方法

为主链接提供一个公共类和一个额外的数据属性，用于在主体上切换类

<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>

现在，使用这些主体类编写css规则，根据使用主体类作为主要选择器在UI中执行任何需要的操作
一般来说，您不必更改元素的ID，当然也不必更改所有元素的ID？@adeneo为什么不？我正在更改该元素的几乎所有属性，我想不出任何其他方法可以在每次不更改其ID的情况下多次更改其属性（即，对其应用不同的CSS）。我认为这是有意义的。但是，我还有哪些不涉及更改ID的替代方案？换班是更好的做法吗？换班更常见是的。只要意识到，如果你在一个类中添加了一个事件监听器……改变它；s类不会删除原始Listener所以我会遇到相同的问题，对吗？意味着我必须彻底改变我的做事方式？我还有别的选择吗？整个事情一开始看起来非常复杂。我不确定你为什么要改变所有这些属性。不太清楚你想要完成什么。。。但它很可能被扩展成一个简单的点击处理程序，用于切换和激活类，并适用于所有那些linksOkay，这仍然不能真正回答问题。。。还有什么不太“复杂”的方法可以改变菜单的外观和HREF？
$("#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");
});

<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'));
});