jQuery没有处理多个div类

时间:2015-08-24 13:58:31

标签: jquery html css

我遇到了让jQuery处理多个div类的问题。正如您在代码中看到的那样,在“容器”中,在同一位置有多个div,看起来像b1,根据单击哪一个隐藏/显示。每个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>

jQuery

$('.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/

1 个答案:

答案 0 :(得分:1)

正如@Deepak Biswal在评论中解释的那样,你的目标始终是B1中的第一个*data[i][j] = new double[x];。要使其工作,请查找与.image点击相对应的.image

.info

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

您可以改进代码,为所有$(".info").click(function() { var $t = $(this).parent().parent().find(".image"); $t.animate({"scrollTop": $t[0].scrollHeight }, 500); return false; }); 部分添加公共类,以避免使用b

我更新了小提琴,其中包含一些可能对您有用的内容:http://jsfiddle.net/x8s2e2sg/2/