javascript - jQuery 隐藏/显示的多个实例不起作用

Question

我有一段简单的代码，它使用下拉菜单来更改某些 div 的显示属性，但我希望能够在同一页面上拥有它的单独实例。它现在不起作用，因为它使用类名来定义要显示和隐藏的内容。

<div>
<select id="selectMe">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<div class="group option1">asdf</div>
<div class="group option2">kljh</div>
<div class="group option3">zxcv</div>
<div class="group option4">qwerty</div>
</div>

<script>
$(document).ready(function () {
    $('.group').hide();
    $('.option1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('.'+$(this).val()).show();
    })
});
</script>

是否有针对 .group div 的不同方法，以便我可以在页面上重复整个 HTML 块并使其仍然有效？

希望你能帮忙！

Answer 1

无论如何，您已经创建了一个包装器，因此请使用它。当您使用父/容器作为上下文时，您可以在页面上的其他任何地方重复它。您可以使用最接近父 div 并在下拉列表的父级中选择.groupor 。.option

$(document).ready(function () {
    $('.group').hide();
    $('.option1').show();

    $('#selectMe').change(function () {
       var container = $(this).closest('.container');
        $('.group', container ).hide(); //Select only the group under its parent
        $('.' + this.value, container).show(); //Select only the target div under its parent
    })
});

小提琴