元素ID未被識別並且沒有觸發功能

-2

我正在嘗試爲用戶在選擇特定字體樣式時創建簡單的選擇選項。如果他們點擊字體div，該div的背景應該改變顏色。元素ID未被識別並且沒有觸發功能

我遇到的問題是，第一個字體div完美地改變顏色 - 但其他字體div s不跟風。

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"); 
    }); 
});

來源

2013-08-02 JoshMc

DUPLICATE ID BAD – Ian

對於'id'（'＃'）選擇器，jQuery內部使用'document.getElementById'，它返回一個元素（或沒有） – Ian

http://jsfiddle.net/jkLrd/3/ – Cherniv

問題：
ID的意圖是唯一的ident ifiers。如果你想識別多個元素，你應該使用類。由於這個原因，當你通過ID選擇$("#font")時，jQuery（使用原生javascript的getElementById）將只返回它遇到的具有該ID的第一個元素。這是因爲如果DOM是有效的，它不應該再找到該ID的實例，並且繼續查找會浪費處理。

A液：
從div動手清除了font的ID，並用類代替他們，而不是像class="font"。由於您已經確定了一些類，因此可以使用多個以空格分隔的類，如：class="font minecrafter"。完成後，您將能夠使用此選擇器選擇font類的元素：$(".font")

來源

2013-08-02 16:12:24 smerny

從技術上來說，選擇器'[id =「font」]'雖然會工作:)我不會建議它，但我只是說 – Ian

@伊恩是對的。 '[id =「font」]'會工作，因爲它是一個屬性/屬性選擇器，儘管它可以用於ID ...它不是專門爲id（唯一標識符）構建的，因此在找到匹配元素後仍然會繼續尋找。伊恩不會建議這樣做的原因是因爲擁有多個ID不是好習慣（至少可以這麼說）。 – smerny

元素ID未被識別並且沒有觸發功能

回答

相關問題