多次点击的jquery快捷方式

Question

好吧，我还是js /编程新手。 无论如何可以指导我如何优化我的代码？ 我确信有多种方法可以编写一个执行相同操作的小而快的代码。

$('.ourservices-content .left ul li:nth-child(1)').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '0px'
        },800)
    })

    $('.ourservices-content .left ul li:nth-child(2)').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '-600px'
        },800)
    })

    $('.ourservices-content .left ul li:nth-child(3)').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '-1200px'
        },800)
    })

    $('.ourservices-content .left ul li:nth-child(4)').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '-1800px'
        },800)
    })

    $('.ourservices-content .left ul li:nth-child(5)').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '-2400px'
        },800)
    })

    $('.ourservices-content .left ul li:nth-child(6)').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '-3000px'
        },800)
    })

    $('.ourservices-content .left ul li:nth-child(7)').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '-3600px'
        },800)
    })

Answer 1

这应该这样做：

$('.ourservices-content .left ul li').each(function (index) {
    $(this).click(function () {
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: '-' + (600 * index) + 'px';
        }, 800);
    });
});

我们正在做的是循环遍历原始$()调用中由选择器匹配的每个元素。 然后，对于匹配的每个元素，我们调整动画参数marginLeft，我们所处的元素索引，从第零个元素开始。

Answer 2

我可以想到几种方法，但最简单的方法是将它包装在一个function ，将数据放在一个array ，然后在for循环中调用该function ：

function animate_box(count,margin) {
    $('.ourservices-content .left ul li:nth-child('+count+')').click(function(){
        $('.our-services-content-box > ul.box').stop().animate({
            marginLeft: margin+'px'
        },800)
    })
}
var left_margin=0;
var indexes=[1,2,3,4,2,2];
for(var i=0;i<indexes.length;i++) {
    animate_box(indexes[i],left_margin);
    left_margin-=600;
}

Answer 3

我没有办法尝试这个，但这样的想法是......

var $items = $('.ourservices-content .left li');
for (var i = 0, len = $items.length; i < len; i++) {
    $items.eq(i).click(function () {
        $('.box').stop().animate({
            marginLeft : '-=600';
        }, 800)
    })
}