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

Question

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

我遇到的问题是第一个字体div 可以完美地改变颜色 - 但是另一种字体divs 并没有效仿。

JSFiddle

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 是唯一的标识符。如果要识别多个元素，则应该使用类。出于这个原因，当您通过 ID 选择 $("#font") 时，jQuery（它使用原生 javascript 的 getElementById）将只返回它遇到的第一个具有该 ID 的元素。这是因为如果 DOM 有效，它不应该再找到该 ID 的实例，继续查找将是浪费处理。

解决方案：
从您的divs 中删除font ID 并将它们替换为一个类，例如class="font"。由于您已经确定了一些类，您可以使用多个由空格分隔的类，例如：class="font minecrafter"。完成此操作后，您将能够使用此选择器通过 font 类选择您的元素：$(".font")