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

你已经创建了一个包装器，所以要使用它。当您使用父/容器作为上下文时，您可以在页面上的任何其他位置重复它。您可以使用closest与父div联系，并在下拉列表的父级中选择.group或.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
    })
});

jQuery hide / show的多个实例不起作用

1 个答案:

Fiddle