一次恢复多个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>
我尝试设置一个系统弹出窗口,为什么我决定使用数据属性。
我希望当一个元素具有 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>