jQuery显示和隐藏事件问题答案

【问题标题】：jQuery show and hide events issuejQuery显示和隐藏事件问题
【发布时间】：2014-12-29 11:15:55
【问题描述】：

我有一些具有以下结构的 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>

【问题讨论】：

您选择的是整个类，它适用于所有元素。尝试最接近（），可能会工作。顺便说一句，你不能使用更多的课程吗？你故意让事情复杂化..
甚至你也可以使用 next()。
我不是 jQuery 的专业人士，这就是为什么我的代码看起来很糟糕 :) 我应该在哪里应用最接近（）？
.closest() 不适用于您的 html 结构，因为它从当前元素开始并向上通过其祖先，而您的元素都是兄弟元素。使用.next()。
请注意 $(this).fadeIn('medium') 在您的点击处理程序中并没有多大意义：如果元素需要淡入 in 它当前必须是不可见的，在这种情况下怎么可能用户点击它？

标签： javascript php jquery wordpress plugins

【解决方案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>

【讨论】：

【解决方案2】：

.siblings()影响上下文中输入框下的每个div，所以在jquery中使用.next()

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

 });

Fiddle

【讨论】：

【解决方案3】：

因为您拥有所有具有相同类“test”的 div，所以兄弟会影响所有具有类“test”的 div

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

http://jsfiddle.net/rwjzfhLy/

【讨论】：