2

モーダル オーバーレイを設定し、単純化できるこのコードを用意しましたが、その方法がわかりません。

理論的には 6 つ以上のコード ブロックが存在するため、理想的にはこれで可能な限り多くのコード ブロックに対応する必要があります。ID (1 から 6) は、PHP を使用して動的に生成されます。

jQuery(function ($) {
// Load dialog on click
$('.open-modal-overlay-1').click(function (e) {
    $('#modal-overlay-1').modal();

    return false;
});

$('.open-modal-overlay-2').click(function (e) {
    $('#modal-overlay-2').modal();

    return false;
});

$('.open-modal-overlay-3').click(function (e) {
    $('#modal-overlay-3').modal();

    return false;
});

$('.open-modal-overlay-4').click(function (e) {
    $('#modal-overlay-4').modal();

    return false;
});

$('.open-modal-overlay-5').click(function (e) {
    $('#modal-overlay-5').modal();

    return false;
});

$('.open-modal-overlay-6').click(function (e) {
    $('#modal-overlay-6').modal();

    return false;
});

});

誰でも助けることができますか？

4

2 に答える 2

3

最適な実装は、残りのマークアップについて想定できる要素によって異なります。

すべての open-modal-overlay-*人がこのクリックリスナーを持つべきだと仮定できますか？これが彼らが持っている唯一のクラスであると仮定できますか？その場合、次のようなことができます。

$('*[class^=open-modal-overlay-]').click(function() {
    var id = $(this).attr('class').slice(-1); // last char of "class" attribute
    $('#modal-overlay-'+id).modal();
});

これが唯一のクラスであると想定できない場合は、その.attr('class')ように使用することも、「クラス属性で始まる」セレクターを使用することもできませんclass^=。それらすべてに固有の別の共通クラスがある場合は、おそらくそれらにアクセスする方がよいでしょう$('.open-modal-overlay')（たとえば、それらのクラス属性がclass="open-modal-overlay open-modal-overlay-2"などの場合）。

そうでない場合は、「class attribute contains」セレクター、、を使用するclass*=か、単にセレクターを指定する必要があります。

$('.open-modal-overlay-1, .open-modal-overlay-2, .open-modal-overlay-3, .open-modal-overlay-4, .open-modal-overlay-5, .open-modal-overlay-6').click(function() {
   ...
});

そして、そのような変数を導出できなかったidので、次のようなことをする必要があります。

var id = $(this).attr('class').replace(/^.*open-modal-overlay-(\d+).*$/, '$1');
于 2012-03-28T12:38:05.707 に答える
0

どうですか：

$([1, 2, 3, 4, 5, 6]).each(function (i, e) {
    $('.open-modal-overlay-' + e).click(function () {
        $('#modal-overlay-' + e).modal();
        return false;
    })
});
于 2012-03-28T12:40:28.240 に答える