以下jQuery不起作用。看一看

时间:2015-11-20 08:01:08

标签: javascript jquery

代码:

<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;的内部材料没有提供滚动功能。

3 个答案:

答案 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 ;到你的脚本标签。