javascript - jQuery 显示和隐藏事件问题

Question

我有一些具有以下结构的 html 元素。

<input class="test" />
<div class="test"></div>

<input class="test" />
<div class="test"></div>

<input class="test" />
<div class="test"></div>

<input class="test" />
<div class="test"></div>

单击任何输入都应显示其相邻的 <div>

但它确实会触发所有 div

我想让当我单击任何输入字段时，仅显示其相邻的 <div>将设置为显示而所有其他隐藏。

到目前为止我拥有的 jQuery 代码如下:

<script type="text/javascript">
    jQuery(document).ready(function($) {

        $('body').on('click', '.test', function () {
                $(this).fadeIn('medium').siblings("div").hide();
        });

    });     

</script>

Answer 1

问题是对 .siblings('div') 的调用将应用于每个 div，因为您提供的 HTML 中的每个元素都位于同一级别。

如果您不想更改此结构，请使用 .next()

例如:

<script type="text/javascript">
jQuery(document).ready(function($) {

    $('body').on('click', '.test', function () {
            $(this).fadeIn('medium').next("div").hide();
    });

});     

</script>