Question

我正在尝试在选择特定字体样式时为用户创建简单的选择选项。如果他们点击字体div，那么div的背景应该会改变颜色。

我遇到的问题是第一个字体div在改变颜色方面效果很好 - 但是其他字体div并不适用。

HTML

<div class="fonts">
  <div id="font" class="minecraft-evenings">
      Hello
      <p>Minecraft Evenings</p>
  </div>
  <div id="font" class="minecrafter">
      Hello
      <p>Minecrafter 3</p>
  </div>
  <div id="font" class="volter">
      Hello
      <p>Volter</p>
  </div>
</div>

的JavaScript / JQuery的

$(document).ready(function() {
    $('#font').click(function() {
        $(this).css("background-color", "#000");
        $('#font').not(this).css("background-color", "#f1f1f1");
    });
});

Answer 1

问题：
ID是唯一标识符。如果要识别多个元素，则应该使用类。出于这个原因，当您使用$("#font")按ID进行选择时，jQuery（使用本机javascript的getElementById）将仅返回其具有该ID的第一个元素。这是因为如果DOM有效，它不应再找到该ID的实例，并且继续查看将浪费处理。

解决方案：
从font中删除div ID，然后将其替换为类class="font"。由于您已经识别了一些类，因此可以使用由空格分隔的多个类，例如：class="font minecrafter"。完成此操作后，您可以使用此选择器使用font类选择元素：$(".font")

元素ID未被识别且未触发功能

1 个答案: