JqueryでIDを追加するにはどうすればよいですか？

debugcn 投稿 Dev

クレイグ

モーダルを使用してページを設定しましたが、現時点では、ページに1つのモーダルがある場合にのみ機能します。

私が達成したいのは、Jqueryにidを適用して、各モーダルが独自のIDを持ち、複数のモーダルで開くようにすることです。

HTML：

<a class="activator1" id="activator1"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box1" id="box1">
    <h3>Title here</h3>
    <p>Text in here</p>
</div>`
<a class="activator2" id="activator2"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box2" id="box2">
    <h3>Title here</h3>
    <p>Text in here</p>
</div>

Jquery

$(function(){
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'80px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-1400px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });
});

charlietfl

一意のクラスを使用せず、共通の要素に共通にしてください。スタイリングに必要な場合は、セカンダリクラスを使用します

単純なデータ属性をターゲットに使用でき、data()メソッドを使用して読み取ることができます

<a class="activator" id="activator1" data-target="#box1>

次に、クリックハンドラセレクタのクラスを使用します

$('.activator').click(function(){
   // "this" is element event occurred on
   var modalTargetSelector = $(this).data('target');
   $('#overlay').fadeIn('fast',function(){
        $(modalTargetSelector ).animate({'top':'80px'},500);
   });

});

同様に、閉じるボタンの場合は、共通のクラスを使用して、次のようにします。

 $('.boxclose').click(function(){
    $(this).closest('.box').animate({'top':'-1400px'},500,function(){
        $('#overlay').fadeOut('fast');
    });
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]