对多个元素使用一个javascript

对于一个分区，我使用这个代码。我想添加多个元素。当我添加具有相同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>

你确定要这么做吗？
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（e）{//按钮，该按钮将激活我们的模式
$（'#model'）。显示（{//将使用显示打开的项目
动画：“fade'，//fade，fadeAndPop，无
动画速度：600，//动画有多快
closeonbackgroundclick:true，//如果单击background将关闭吗？
dismissmodalclass:'close'//将关闭打开模式的按钮或元素的类
});
返回false；
});
});

我想补充一下

<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>

你确定要这么做吗？
你想那样做吗？

ID是唯一的。该规范仅允许每个id使用一个元素

改用类

<div class="toActOn">
        Are you sure you want to do that?
</div>  
<div class="toActOn">
        Really sure
</div>  

你确定要这么做吗？
真的确定

然后在jQuery中将选择器更改为

.toActOn

（即

$（“.toActOn”）

）

这解释了ID所依据的内容

ID类型属性的特殊之处在于，在一个一致的文档中，任何两个这样的属性都不能具有相同的值，而不管携带它们的元素的类型如何；无论文档语言是什么，都可以使用ID类型的属性来唯一标识其元素。在HTML中，所有ID属性都命名为“ID”

---

使用类而不是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>

你确定要这么做吗？
你确定吗？
请确认
$（文档）.ready（函数（）{
$（'.button'）。单击（函数（e）{//按钮，该按钮将激活我们的模式
$（'#'+$（this.attr（'modal'）+'））.reveal（{//将使用reveal打开的项目
动画：“fade'，//fade，fadeAndPop，无
动画速度：600，//动画有多快
closeonbackgroundclick:true，//如果单击background将关闭吗？
dismissmodalclass:'close'//将关闭打开模式的按钮或元素的类
});
返回false；
});
});

id必须是唯一的。改为使用类。它可以工作，但窗口中存在popover的内容。它是如何解决的？@Aneesh很抱歉，我不明白你的要求。如果您想详细讨论类与ID的主题，或者如何解决您遇到的另一个特定问题，我认为这超出了这个问题的范围。非常欢迎你和我一起聊这件事。如果你对与这个问题有关的问题感兴趣，如果你能更好地解释你的问题，我将不胜感激。“窗口中存在的PopOver”对我来说很难理解。“如果你觉得我的答案解决了你的问题，请考虑接受它。我试过这个代码，效果不错，但是在两个按钮点击显示相同的内容。”像这样的代码你确定要这样做吗？海；我不知道你的意思。你想为每个按钮显示不同的内容吗？好的，我已经修改了我的答案，允许每个按钮显示不同的内容。