javascript - 使用变量作为 JQuery 选择器

Question

我有一个下拉/选择菜单，可以根据用户选择的内容显示和隐藏各种 div。在每个 div 中都有另一个下拉/选择菜单，我也想在更改时触发操作。

由于这个 div 是动态赋予 ID 的，所以我很难弄清楚如何选择所需的下拉/选择菜单。

这是 jQuery 代码:

$(document).ready(function(){

    $("#category").change(function(){
        var category = $("#category").val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();
    }) ;

    var category = $("#category").val();
    var selector = 'selector_'+category;

    $("#"+selector).change(function(){
        alert('Do something');
    });
});

以及一些简化的 HTML:

<select id='category'>
    <option value='0'>1</option>
    <option value='1'>2</option>
    <option value='2'>3</option>
</select>

<div class='box class-name' id='1'>
    <select id='selector_1'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='2'>
    <select id='selector_2'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>
<div class='box class-name' id='3'>
    <select id='selector_3'>
        <option value='1'>One</option>
        <option value='2'>Two</option>
    </select>
</div>

div 根据需要显示和隐藏，但我一生都无法收到警报('Do Something')；触发我认为是我如何尝试选择下拉/选择菜单的问题。

非常感谢所有帮助!

干杯，DB。

Answer 1

您需要链接更改。按照您的制作方式，代码会同时运行，这意味着:

1. 文档准备好后，执行以下操作:
2. 在#category 元素中设置 onChange
3. 查找类别当前值(目前未选择任何类别，因此值未定义)
4. 将选择器设置为“selector_”+未定义
5. 使用 id 选择器查找元素，由于没有具有该 id 的元素，因此未定义任何更改。

试试这个:

$(document).ready(function() {
    var categoryField = $("#category");
    categoryField.change(function() {
        var category = categoryField.val();
        var box = $('#'+ category);
        $('.class-name').hide();
        box.show();

        var selector = 'selector_'+category;

        $("#"+selector).change(function() {
            alert('Do something');
        });
    });
});