modales Fenster öffnet nur mit dem ersten Element, nicht die zweite oder die dritte

Question

Html für die mehreren Bilder (ich versuche, alle Bilder mit einem modalen zu verwenden) und müssen spezifische Informationen basierend auf dem Bild modal anzeigen ist gewählt.

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

JavaScript für die Herstellung in der Trigger unter

auf das Element klicken

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

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

Answer 1

Dies liegt daran, ID auf ein einzelnes Element ist einzigartig, so dass jede Seite kann nur ein Element haben mit diese ID. Sie können dies beheben, indem Sie die Klasse verwenden. Sie können dieselbe Klasse für mehrere Elemente verwenden.

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

Wenn Sie eine Klasse referenzieren, müssen Sie die verwenden. (Klassenselektor) anstelle eines # (ID-Selektors)

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