一次恢复多个id

Recovering multi id at a time

我尝试设置一个系统弹出窗口,为什么我决定使用数据属性。

我希望当一个元素具有 ID "popup" 时,我使用 jQuery 数据项值恢复。

数据项值具有要在我的弹出窗口中显示的 ID,我的问题是,如果我有多个 ID 弹出窗口,恢复的只有一个 ID,即本页中的第一个。

如何检索所有的弹窗和显示ID是与数据项对应的值?

<div id="boxpop">
  <div class="centered">
    <span></span>
    <div class="close-btn"></div>
  </div>
</div>
<div id="login" style="display:none;">
  Test div
</div>

<header>
  <div id="MainHeader">
    <div class="logo"></div>
    <nav id="Menu">
      <li>
        <span class="icon"></span>
        <span class="text"><a href="#" id="popup" data-item="login">Click me!</a></span>
      </li>

      <li>
        <span class="icon icone card"></span>
        <span class="text"><a href="" id="popup" data-item="test">Shop info</a></span>
      </li>
    </nav>
  </div>
</header>

<script type="text/javascript">
  $("#popup").click(function() {
    a = $("#popup").data("item");
    alert(a);

  });

  function demo(div) {
      $("#boxpop").fadeIn(500);
      $("#boxpop .centered span").empty();
      $(div).insertAfter("#boxpop .centered span").fadeIn(100);
  }
</script>
  

ID 必须是唯一的。

为此你应该使用class,这是正确的方法:

      <li>
        <span class="icon"></span>
        <span class="text"><a href="#" class="popup" data-item="login">Click me!</a></span>
      </li>

      <li>
        <span class="icon icone card"></span>
        <span class="text"><a href="" class="popup" data-item="test">Shop info</a></span>
      </li>

然后...

$(".popup").click(function() {
     a = $(this).data("item");
     alert(a);
});

希望对您有所帮助。

这是因为同一文档中不能有多个具有相同 id 属性的元素 - 这是无效的 HTML。您应该改用 类。从那里您可以在点击处理程序中使用 this 关键字来引用引发事件的元素并读取 data 属性。试试这个:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxpop">
  <div class="centered">
    <span></span>
    <div class="close-btn"></div>
  </div>
</div>
<div id="login" style="display:none;">
  Test div
</div>

<header>
  <div id="MainHeader">
    <div class="logo"></div>
    <nav id="Menu">
      <li>
        <span class="icon"></span>
        <span class="text"><a href="#" class="popup" data-item="login">Click me!</a></span>
      </li>

      <li>
        <span class="icon icone card"></span>
        <span class="text"><a href="" class="popup" data-item="test">Shop info</a></span>
      </li>
    </nav>
  </div>
</header>

<script type="text/javascript">
  $(".popup").click(function() {
    a = $(this).data("item");
    alert(a);
  });

  function demo(div) {
    $("#boxpop").fadeIn(500);
    $("#boxpop .centered span").empty();
    $(div).insertAfter("#boxpop .centered span").fadeIn(100);
  }
</script>