模态窗口将仅使用第一个元素打开，而不使用第二个或第三个元素打开

Question

Html for the multiple images (I am trying to use all of the images with one modal) and have to modal display specific information based on the image that is chosen.

  <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 for making taking in the trigger of clicking on the element

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

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

Answer 1

This is because ID is unique to a single element, so each page can only have one element with that ID. You can fix this by using class, you can use the same class on multiple elements.

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

When referencing a class you'll need to use the . (class selector) instead of a # (ID selector)

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