对多个元素使用一个 javascript [重复]

Question

对于弹出框，我正在使用此代码。我想添加多个元素。当我添加多个具有相同 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>

Answer 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”；

Answer 2

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