1

次のような製品の詳細コンテンツを表示する 2 つの div があります。

  <div class="product-style-odd">
        <select>

            <option value="active" onClick="changeStatus(<?php echo $productid;?>,0)">Activate</option>
            <option value="inactive" onClick="changeStatus(<?php echo $productid;?>,1)">Deactivate</option>

        </select>
    </div>

    <div class="product-style-even">
        <select>

            <option value="active" onClick="changeStatus(<?php echo $productid;?>,0)">Activate</option>
            <option value="inactive" onClick="changeStatus(<?php echo $productid;?>",1)>Deactivate</option>

        </select>
    </div>

    <script>
        function changeStatus(productid, status){
            //Now what I want to reference and hide that div in which changeStatus function was invoked
        }
    </script>

上記のコードの説明はほとんどありません。これらの奇数と偶数のスタイル div はどちらもループ内にあるため、ループ内の反復回数に応じて繰り返されます。今私が達成したいのは、ユーザーが選択メニューから非アクティブなオプションをクリックすると、その特定の div がフェードアウトし、Ajax を介してその製品のステータスを変更することです。

クリックされた特定の div のクラスを取得する方法がわかりません。コードのインデントが不十分で申し訳ありませんが、私は SO エディターにあまり詳しくありません。

編集: 問題はまだ解決されていません。

その理由は、そのページの構造が非常に複雑だからです。最初に body があり、次に div があり、次にいくつかの div があり、次にクラス product-style-even または product-style-odd の div があります。ここで、親 div を選択するコードを配置すると、body の後に div が選択されます。

4

3 に答える 3

1

このようなものはどうですか？

$("select").change(function () {
    var selectVal;
    $("select option:selected").each(function () {
        selectVal = $(this).val();
    });
    if (selectVal == 'inactive') {
        var selectParentDiv = $(this).parents('div');
        selectParentDiv.fadeOut();
        console.log(selectParentDiv.attr('class'));
    }
});

例: http://jsfiddle.net/rjngr/3/

于 2013-10-24T17:48:11.530 に答える