모달 창은 두 번째 또는 세 번째가 아닌 첫 번째 요소 만 사용하여 엽니 다. 여러 이미지에 대해

Question

HTML (모든 이미지를 하나의 모달로 사용하려고합니다.) 이미지를 기반으로 특정 정보를 모달 표시해야합니다. 선택됩니다. ID가 하나의 요소에 고유하므로 요소 클릭의 트리거에 복용 만들기위한

<div id = "items"> 
    <li id="item"> 
    <a><img src="images/items/Meat Nugget.png" /> 
    </li> 
    <li id="item"> 
    <a><img src="images/items/Bustling Fungus.png" /> 
    </li> 

이

자바 스크립트는

(function(){ 
    var $content = $('#share-options').detach(); 

    $('#item').on('click', function() {   
    modal.open({content: $content, width:340, height:300}); 
    }); 
}()); 

Answer 1

이다, 그래서 각 페이지는 하나 개의 요소를 가질 수 있습니다 그 신분증. 클래스를 사용하여이 문제를 해결할 수 있습니다. 여러 클래스에서 동일한 클래스를 사용할 수 있습니다.

<div id = "items"> 
    <li class="item"> 
    <a><img src="images/items/Meat Nugget.png" /> 
    </li> 
    <li class="item"> 
    <a><img src="images/items/Bustling Fungus.png" /> 
    </li> 

클래스를 참조 할 때는를 사용해야합니다. # (ID 선택자) 대신 클래스 선택기

$('.item').on('click', function() {   
    modal.open({content: $content, width:340, height:300}); 
    }); 
}());