-2

在选择特定字体样式时，我正在尝试为用户创建简单的选择选项。如果他们点击一种字体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");
    });
});
4

1 回答 1

6

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

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

于 2013-08-02T16:12:24.903 回答