一次恢復多個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>