-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 ごとに 1 つの要素のみが許可されます。

代わりにクラスを使用してください

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

次に、jQuery でセレクターを.toActOn(つまり$(".toActOn"))に変更します。

これは、W3cによると、ID とは何かを説明しています。

タイプ ID の属性を特別なものにしているのは、それらを運ぶ要素のタイプに関係なく、2 つのそのような属性が適合ドキュメントで同じ値を持つことができないということです。ドキュメントの言語が何であれ、ID 型の属性を使用してその要素を一意に識別できます。HTML では、すべての ID 属性に「id」という名前が付けられます。

于 2013-03-12T18:29:20.457 に答える
0

id の代わりに class を使用して要素を識別します...

<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 に答える