0

我现在正在挠头。

我有一个带有 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>

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

任何提示都会很棒，

谢谢

标记

4

3 回答 3

1

如果我理解正确，您只需要div.detail点击div.control. 你可以尝试重写你的函数，如下所示，

$(".anatomy div.control").click(function() {
    $(this).next().fadeToggle('slow');        
});
于 2012-06-01T14:51:24.817 回答
0 
$('.control').on('click', function() {
  $(this).next().fadeToggle();
});
于 2012-06-01T14:50:43.840 回答
0

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

  $('.classToFade').fadeToggle('slow')
于 2012-06-01T14:52:00.217 回答