Question

此刻我正在挠头。

我有一个带有2个按钮的图像，可能会转到3,4,5，依此类推。每个按钮都有一个点击功能，该功能将在图像旁边的信息框中淡入淡出。信息框将根据每个按钮而不同，因此例如按钮1可以是关于绵羊而按钮2可以是关于狗的。然后，我将具有单击每个按钮以在fadeToggle上逐个显示信息框的功能。

我遇到的问题是每个容器都有相同的类，所以我得到那个容器的第二个子元素并将其淡入但它只在第一个点击等等时淡出。 / p>

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

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按钮打开.detail框，设置为display：none;在一个页面上可能有几个这样的框，每个框在.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>

我想我几乎就在那里，但我的知识并不像我恐怕那样。

任何提示都会很棒，

由于

标记

Answer 1

如果我理解正确，您只需点击div.detail即可切换div.control。您可以尝试重写您的功能，如下所示，

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

Answer 2

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

Answer 3

为什么不在单击某个项目时为要隐藏的每个元素添加一个类，然后调用

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

如何点击相同类的2个div来同时淡化其子元素？

3 个答案: