Восстановление нескольких идентификаторов одновременно

Question

Я пытаюсь создать всплывающее окно системы, почему я решил использовать атрибут data.

Желательно, чтобы, когда элемент имеет идентификатор «popup», я восстановился с использованием значения элемента данных jQuery.

Значение элемента данных имеет идентификатор, отображаемый в моем всплывающем окне, моя проблема в том, что если у меня есть несколько всплывающих окон, то в результате восстановления только один единственный идентификатор, первый на этой странице.

Как сделать, чтобы все всплывающие окна и идентификатор отображения соответствовали значению с элементом данных?

<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

идентификатор должен быть уникальным.

Вы должны использовать класс для этого, это правильный путь:

 <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. Вместо этого вы должны использовать классы. Оттуда вы можете использовать ключевое слово в обработчике кликов, чтобы ссылаться на элемент, который поднял событие, и прочитать атрибут 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>