Question

我尝试使用系统弹出窗口，为什么我决定使用数据属性。

我希望当一个元素具有id“popup”时，我使用jQuery数据项值恢复。

数据项值有我的弹出窗口中显示的id，我的问题是如果我有几个id弹出窗口，则恢复只有1个单独的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>

Answer 1

ID必须是唯一的。

你应该使用class，这是正确的方法：

LimitRequestLine 100000

然后......

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

希望它有所帮助。

Answer 2

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

＆＃13;

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

＆＃13;

一次恢复多个ID

2 个答案: