一次恢复多个ID

Question

我试图放置一个系统弹出窗口，为什么我决定使用数据属性。

我希望当一个元素的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> 
 

Answer 1

ID必须是唯一的。

您应该使用这个类，这是正确的做法：

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

希望它能帮助。

Answer 2

这是因为在同一文档中不能有多个具有相同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>