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

Question

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

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

的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的实例,并且继续查找将浪费处理.

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