jQuery 不适用于多个 div 类

Question

我在让 jQuery 处理多个 div 类时遇到了问题。正如您在代码中看到的那样，在“容器”中有多个看起来像 b1 的相同位置的 div，它们根据单击哪个来隐藏/显示。在每个 div 类中都有图像和按钮。这些按钮浏览这些图像并滚动到页面底部的信息部分。问题是这些按钮的 jQuery 仅适用于第一个 div“.b1”，所有其他 div(“.b2”“.b3”等)响应不正确。例如，用于向下滚动的信息按钮仅在 b1 中这样做，在所有其他按钮中向上滚动。上一个/下一个按钮响应不正确并开始跳过图像(我不会分享该代码，因为它很长而且很复杂，但希望我明白了这一点)。

我不知道问题是在 html、css 还是 jQuery 中，但我已尝试全部更改，但没有出现不同的结果。有人看到出了什么问题吗？

<div class="container">

    <div class="b1">

            <div class="buttons">   
                <div class="previous">previous</div>
                <div class="next">next</div><br>
                <div class="info">information</div>
            </div>

            <div class="image">     
                <div class="section"><img src="example.jpg"></div>
                <div class="section"><img src="example.jpg"></div>
                <div class="section"><img src="example.jpg"></div>
                <div id="information" class="section">text</div>
            </div>

    </div>

</div>

j查询

$('.a1').click(function() {  
       $(".b2, .b3, .b4, .b5, .b6, .b7, .b8, .b9, .b10, .b11").hide();     
       $('.b1').show() 
});

$(".info").click(function() {
        var $t = $(".image");
        $t.animate({"scrollTop":
            $(".image")[0].scrollHeight
            }, 500);
        return false;
});

CSS

.container{
    position: relative;
    left: 2.5vw;
}

.image{
    float: left;
    left: 2.5vw;
    margin-right: 2.5vw;
    height: 70vh;
    position: relative;
    overflow-x:hidden;
    overflow-y:scroll;
}

.buttons{
    position: relative;
    float: left;
}

http://jsfiddle.net/x8s2e2sg/

Answer 1

正如@Deepak Biswal 在评论中解释的那样，您始终以 B1 中的第一个 .image 为目标。为了让它工作，让它寻找与点击的 .info 相对应的 .image:

$(".info").click(function() {
        var $t = $(this).parent().parent().find(".image");
        $t.animate({"scrollTop":
            $t[0].scrollHeight
            }, 500);
        return false;
});

http://jsfiddle.net/x8s2e2sg/1/

您可以改进您的代码，向所有 b 部分添加一个通用类，以避免使用 parent().parent()

我用一些可能对您有帮助的东西更新了 Fiddle:http://jsfiddle.net/x8s2e2sg/2/