-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 のインスタンスをこれ以上見つけることができず、検索を続行する処理が無駄になるためです。

解決策:から ID を
削除し、代わりに のようなクラスに置き換えます。すでにいくつかのクラスが識別されているため、次のように複数のクラスをスペースで区切って使用できます。これを行った後、このセレクターを使用してクラスで要素を選択できるようになります。fontdivclass="font"class="font minecrafter"font$(".font")

于 2013-08-02T16:12:24.903 に答える