Question

我写了一段Javascript，其中一个菜单按钮用于更改页面的外观和菜单本身的href。我尝试创建两个“层”（也就是说，再次单击时再次更改），但由于某种原因，只有第一个更改被成功调用。当按下#black-button时，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");
});

编辑：为了摆脱不断变化的ID，我提出了一种新方法，它为每个按钮使用通用ID，只是添加/删除类来改变外观，并根据“Switcher按钮”的类改变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");
});

Answer 1

代码运行时

$("#black-button")不存在。

您更改了一个元素ID以匹配它，但在尝试添加事件侦听器之后。

更改元素ID只是一个坏主意，并且已经导致您出现问题。事件绑定到元素，而不是绑定到ID或类

当您将pastel-button的ID更改为black-button时，不会删除您最初为pastel-button
最初引用的元素创建的事件侦听器
您可以使用 事件委派 来完成所有工作但我建议这只是掩盖了首先切换ID的错误做法

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

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

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

使用该类创建一个事件处理程序。在该处理程序中，在body和on active按钮上更改类：

$('.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规则，这些规则基于使用body类作为前导选择器来执行UI中所需的任何操作

点击时没有运行javascript的部分

1 个答案: