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

看这个演示

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

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

    $(".pr_opener").change(function () {
        var i = $('option:selected', this).text();
        if (i=='Open') {
            $(this).closest("li").next(".open_times").show();
        } else {
            $(this).closest("li").next(".open_times").hide();
        }
    });
});

Answer 2

您可以将其简化为：

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

此外，您需要修复标记（您没有<select>正确关闭任何元素）

这是一个小提琴

Answer 3

让事件传播到ul然后处理它。

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

JS 小提琴：http: //jsfiddle.net/6yv4g/5/