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

请参阅此demo

$(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>元素）

Here's a fiddle

Answer 3

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

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

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

jQuery选择显示/隐藏多个元素的选项

3 个答案:

Here's a fiddle