单击时，如何让 2 个具有相同类的 div 同时淡入它们的子元素？答案

【问题标题】：How can I get 2 divs with same class to fadeIn their child element simultaneously when clicked?单击时，如何让 2 个具有相同类的 div 同时淡入它们的子元素？
【发布时间】：2012-06-01 14:46:56
【问题描述】：

我现在正在摸不着头脑。

我有一个带有 2 个按钮的图像，可能会变成 3、4、5 等等。每个按钮都有一个点击功能，会在图片旁边的信息框中淡出。信息框会因每个按钮而异，例如按钮 1 可能是关于羊的，按钮 2 可能是关于狗的。然后，我将具有单击每个按钮以在 fadeToggle 上一一显示信息框的功能。

我遇到的问题是每个容器都具有相同的类，所以我得到了该容器的第二个子元素并将其淡入，但它仅在单击的第一个元素等中淡入等等。

请参阅下面的标记并进行解释。

jQuery

    var children = $(".anatomy").children().eq(1);

$(document).ready(function(){     
    fadeDetail();
});

function fadeDetail() {

    $(".anatomy div.control").click(function() {
        children.each(function(){
        $(this).fadeToggle('slow');
        })
    });

}

Html - 这里的 .control 按钮打开了设置为 display: none; 的 .detail 框。一个页面上可能有多个这样的框，每个框在 .detail div 中都有不同的内容。

<article class="anatomy">
    <!-- custom field data will allow these to be positioned via cms-->
       <div class="control" style="left:; right:; top:300px; bottom:;">
            <img src="img/more-button.png" alt="more-button" width="37" height="36" />
        </div>
        <!-- hide this div as it will not be needed. Only needed when asked to open-->
        <div class="detail">
        <img src="img/articles/detail-image.png" alt="detail-image" width="340" height="217" />
        <h1>Lorem ipsum</h1>
        <p>Hello</p>
        </div>
</article>

我想我快到了，但恐怕我的知识还没有到这个程度。

任何提示都会很棒，

谢谢

标记

【问题讨论】：

标签： jquery class click fadein

【解决方案1】：

如果我理解正确，您只需要在点击div.control 时切换div.detail。您可以尝试像下面这样重写您的函数吗，

$(".anatomy div.control").click(function() {
    $(this).next().fadeToggle('slow');        
});

【讨论】：

嘿 Vega，有时最简单的事情在大多数时间都可以正常工作。感谢反馈

【解决方案2】：

$('.control').on('click', function() {
  $(this).next().fadeToggle();
});

【讨论】：

在现代浏览器中使用.control 更快，但这最终会在整个页面中绑定所有具有control 类的元素，而不是.anatomy 中的元素
当然，也可能存在他不想绑定的类anatomy 的其他部分。
我不知道.. 我只是推测.. 可能是也可能不是.. 但是您的选择器很广泛，可能不仅仅选择预期的元素。
我不同意你的观点，尽管我认为没有必要进行推测。我的示例解决了他发布的问题，就像您的一样，我们都在进行推测。我非常感谢您的反馈。

【解决方案3】：

为什么不给每个你想在点击一个项目时隐藏的元素添加一个类，然后调用

  $('.classToFade').fadeToggle('slow')

【讨论】：