-1

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

2 回答 2

1

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

改用一个类

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

然后在 jQuery 中将您的选择器更改为.toActOn（即$(".toActOn")）

这解释了根据W3c 的ID 是什么

ID 类型属性的特殊之处在于，在一个符合标准的文档中，没有两个这样的属性可以具有相同的值，无论携带它们的元素的类型如何；无论使用哪种文档语言，都可以使用 ID 类型的属性来唯一标识其元素。在 HTML 中，所有 ID 属性都命名为“id”；

于 2013-03-12T18:29:20.457 回答
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>
于 2013-03-12T18:29:38.187 回答