对于popover一个部门,我正在使用此代码。我想添加多个元素。当我添加具有相同id的多个元素时,脚本不起作用。怎么解决?脚本是。
<a href="#" id="button">Click me</a>
<div id="modal">
<div id="heading">
Are you sure you want to do that?
</div>
</div>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function(e) { // Button which will activate our modal
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>
我想这样添加。
<a href="#" id="button">Click me</a>
<div id="modal">
<div id="heading">
Are you sure you want to do that?
</div>
</div>
<a href="#" id="button">Click </a>
<div id="modal">
<div id="heading">
You want to do that?
</div>
</div>
答案 0 :(得分:1)
ID是唯一。规范只允许每个id一个元素。
改为使用班级
<div class="toActOn">
Are you sure you want to do that?
</div>
<div class="toActOn">
Really sure
</div>
然后在jQuery中将您的选择器更改为.toActOn
(即$(".toActOn")
)
这解释了根据the W3c
的ID使ID类型属性特殊的原因是,无论承载它们的元素的类型如何,在符合的文档中没有两个这样的属性可以具有相同的值;无论文档语言如何,ID类型属性都可用于唯一标识其元素。在HTML中,所有ID属性都被命名为“id”;
答案 1 :(得分:0)
使用class而不是id来标识元素......
<a href="#" class="button" modal="m1">Click me</a>
<div id="m1">
<div id="heading">
Are you sure you want to do that?
</div>
</div>
<a href="#" class="button" modal="m2">Click</a>
<div id="m2">
<div id="heading">
Are you sure?
</div>
</div>
<a href="#" class="button" modal="m3">Click this</a>
<div id="m3">
<div id="heading">
Please confirm
</div>
</div>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function(e) { // Button which will activate our modal
$('#' + $(this).attr('modal') + ').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
</script>