用于多次单击的jquery快捷方式

jquery shortcut for multiple clicks

本文关键字：jquery 快捷方式 单击 用于      更新时间：2023-09-26

我对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)
    })

这应该做到：

$('.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，即我们所处的元素索引。

我能想到几种方法，但最简单的方法是将其封装在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;
}

我没有办法尝试，但这样的想法。。。

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)
    })
}
相关文章：