模式窗口只会使用第一个元素打开,而不是第二个或第三个元素

modal window will only open using the first element, not the second or the third

本文关键字:元素 第二个 三个 窗口 第一个 模式      更新时间:2023-09-26

Html的多个图像(我试图使用一个模态的所有图像),必须模态显示基于所选择的图像的特定信息。

  <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用于接收点击元素

的触发器
(function(){
  var $content = $('#share-options').detach();  
  $('#item').on('click', function() {           
    modal.open({content: $content, width:340, height:300});
  });
}());

这是因为ID对于单个元素是唯一的,所以每个页面只能有一个具有该ID的元素。你可以通过使用class来解决这个问题,你可以在多个元素上使用相同的class。

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