代码:
<div>
<a href="javascript:void(0)" class="back">Back</a>
<div class="outer"></div>
<a href="javascript:void(0)" class="next">Next</a>
</div>
<div>
<a href="javascript:void(0)" class="back">Back</a>
<div class="outer"></div>
<a href="javascript:void(0)" class="next">Next</a>
</div>
jQuery代码:
$('.next').click(function() {
$('.next').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$('.back').next().animate({
scrollLeft: '-=150'
}, 200);
});
错误: 基本上我有更多的代码与上面相同的类,我想滚动被点击的代码。但是上面写的代码会滚动所有&#34; .outer&#34;在页面上。每组代码都在不同的div中。 &#34;外部&#34;的内部材料没有提供滚动功能。
答案 0 :(得分:4)
您需要使用当前元素上下文执行代码,即this
。同时为父元素的兄弟元素设置动画,然后使用$(this).closest('div')
遍历,然后使用.prev()
或next()
$(function() {
$('.next').click(function() {
$(this).closest('div').prev().animate({
scrollLeft: '+=150'
}, 200);
});
$('.back').click(function() {
$(this).closest('div').next().animate({
scrollLeft: '-=150'
}, 200);
});
});
答案 1 :(得分:2)
简单使用$(this)
获取当前对象
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
答案 2 :(得分:2)
不要忘记将代码包装在文档就绪函数中。
<script>
$(document).ready(function() {
$('.next').click(function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').click(function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
同样使用on方法更适合事件绑定,例如
<script>
$(document).ready(function() {
$('.next').on('click', function () {
$(this).prev().animate({ scrollLeft: '+=150'}, 200);
});
$('.back').on('click', function () {
$(this).next().animate({ scrollLeft: '-=150'}, 200);
});
});
</script>
编辑:
正如@GuruprasadRao指出的那样,我假设你已经确定你已经使用了HTML5文档类型,否则你需要添加type =&#34; text / javascript&#34 ;到你的脚本标签。