요소 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> 

자바 스크립트/JQuery와

$(document).ready(function() { 
    $('#font').click(function() { 
     $(this).css("background-color", "#000"); 
     $('#font').not(this).css("background-color", "#f1f1f1"); 
    }); 
}); 

Answer 1

문제 :
ID 년대가 의미하는 고유 식별자가 될 ifiers. 여러 요소를 식별하려면 클래스를 사용해야합니다. 따라서 $("#font")으로 ID를 선택하면 jQuery (기본 자바 스크립트 getElementById 사용)는 해당 ID가있는 첫 번째 요소 만 반환합니다. 이는 DOM이 유효하면 더 이상 해당 ID의 인스턴스를 찾지 않아야하므로 처리를 계속하는 것이 낭비되기 때문입니다.

해결책 :
이 div의에서 font ID 년대를 제거하고 class="font"처럼, 대신 클래스로 대체. 클래스를 이미 식별 했으므로 공백으로 구분 된 여러 클래스를 사용할 수 있습니다 (예 : class="font minecrafter"). 이 일을 한 후에는이 셀렉터를 사용하여 font 클래스와 요소를 선택할 수 있습니다 :`id` (`#`) 셀렉터를 들어 $(".font")