我遇到了让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;
}
答案 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/