jquery - 複数の要素のjQuery選択オプションの表示/非表示

Question

こんにちは、選択オプションで要素を表示および非表示にするためのこのコードがあります。これは、1 つの要素に対してはうまく機能しますが、より多くの要素で使用すると、正しく機能しなくなります。各要素で別々に機能するように変更するにはどうすればよいですか?

$(document).ready(function (e) {

    var $targets = $(".open_times");

    $(".pr_opener").change(function () {
        var i = $('option:selected', this).index();
        $targets.show().eq(i).hide();
    });
});

http://jsfiddle.net/6yv4g/1/

Answer 1

次のように単純化できます。

$(".pr_opener").change(function () {
    $(this).parent().next('div.open_times').toggle( this.value == 'Open' );
});

また、マークアップを修正する必要があります (どの<select>要素も適切に閉じていません) 。

ここにフィドルがあります

Answer 2

イベントを まで伝播させてからul処理します。

$(document).ready(function (e) {
    $("#pr_times ul").on("change",function () {
        $(".open_times", this).toggle();
    });
});

JS フィドル: http://jsfiddle.net/6yv4g/5/