Question

我有一个ID为menuItem的下拉列表。选择选项后，我需要通过this.id显示相关的项目列表。

 $("#menuItem").on("click", ".restaurant", function() {
    $(".item").hide().filter("[data-source=" + this.id + "]").show();
    return false;
});

无法显示此子列表。

Answer 1

如果您有兴趣在特定元素或页面的一部分中切换显示/隐藏，那么您应该使用jquery＆＃34;切换＆＃34;功能。给出了切换函数的一个简单示例

$("button").click(function(){
  $("p").toggle();
});

这将简单地切换显示/隐藏＆＃34; P＆＃34;页面中的元素，您可以指定您的元素ID。

Answer 2

尝试$(this).attr('id')而不是this.id ....这是正确的jQuery语法......

$("#menuItem").on("click", ".restaurant", function() {
        $(".item").hide().filter("[data-source=" + $(this).attr('id') + "]").show();

        return false;
    });

Answer 3

如果有人想知道这是工作代码：

            $("#restaurant").on("change", function (event) {

                $("option:selected").each(function () {

                   $('.item').hide().filter("[data-source=" + this.id + "]").show();

                });

在下拉菜单选择事件上切换隐藏/显示

3 个答案: