2

コンテナに動的にデータを入力する同じクラス名の複数のdivがあります。

<div class="container">
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
<div class="content cancel"><button class="showModal"></button></div>
</div>

各div.contentには、jqueryUIダイアログを表示するボタンがあります。モーダルが起動されると、保存とキャンセルの2つのボタンがあります。[キャンセル]をクリックすると、モーダルを起動したdivのインデックス位置がアラートに表示され、起動元のdiv.contentコンテナからクラス「cancel」が削除されます。

<div class="modal">
<button class="save">save</button>
<button class="RemoveCancel">cancel</button>
</div>

これが私のJqueryです

$(".modal").on("click", ".RemoveCancel", function () {

    var parent = $(this).closest(".content");
    var modalTest = $(".content").index(parent);
    $("div.content:nth-child(" + (modalTest + 1) + ")").removeClass("cancel");
    alert("div.content:nth-child(" + (modalTest + 1) + ")");
});

とモーダルのために

$(function () {
    $(".modal").dialog({
        autoOpen: false,
        height: 140,
        modal: true
    });

 $(".showModal").live('click', function () {
        $(".modal").dialog("open");
        return false;
    });

    $(".save, .RemoveCancel").live('click', function () {
        $(".modal").dialog("close");
        return false;
    });
});

入力していただきありがとうございます。現在、アラートの値は-1です。インデックスのセレクターを省略すると、多くのdivがインデックスから離れていても表示されます。これが理にかなっていることを願っています、もう一度ありがとう。

4

1 に答える 1

0

コードを再構築します。これが私が思いついたフレームワークです。ニーズに合わせて活用できると思います。

http://jsfiddle.net/v4dtL/

いくつかのこと：

使用しないでくださいlive。非推奨になりました。onまたはのdelegate代わりに使用してください。

クリックされた要素にモーダル化と呼ばれるクラスを追加します。これにより、ファンキーなDOMトラバーサルを実行せずに、誰がモーダルウィンドウを起動したかを追跡できます。

jQueryを使用indexして、クリックされた要素の兄弟に関連するインデックスを見つけます。

//when showmodal is clicked, add modalized class to the clicked element
$(".container").on('click', '.showModal', function() {
    $(".modal").show();
    $(this).addClass('modalized');
});

//I broke save and removecancel into separate event handlers so that they don't step on each others toes (order of operations)
$(".modal").on('click', '.save', function() {
    $(".modal").hide();
    $('.modalized').removeClass('modalized');
});

//Use Index() to find the modalized element in relation to its siblings
$(".modal").on("click", ".RemoveCancel", function() {        
    var index = $('.showModal').index($('.modalized'));
    alert(index);
    $(".modal").hide();    
    $('.modalized').removeClass('modalized');
});

​

jQueryのdataオブジェクトを使用すると、要素に関する情報を保存できます。だからあなたはこのようなことをすることができます。テストされていません。

$('.showModal').click( function() {
      //store clicked index
      var index = $(this).siblings().index($(this));
      $('.modal').show().data('clickedIndex', index);
});

$('.cancel').click( function() {
      //retrieve clicked index
      var index = $(this).closest('.modal').data('clickedIndex');
      alert(index);
      //get all showmodal buttons, but grab the one with matching index
      $('.showModal')[index].removeClass('foo');
});
于 2012-11-28T02:08:49.310 に答える