CODEWITHSUNDEEP
javascriptjquery
max
max

Reputation: 391

jquery shortcut for multiple clicks

well i am still new to js/programming. can anyhow guide me on how can i optimize my code? i am sure that there are multiple ways to write a small and fast code that does the same thing.

$('.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)
    })

Upvotes: 0

Views: 137

Answers (3)

elclanrs
elclanrs

Reputation: 94121

I've no way to try this but something like this is the idea...

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

Upvotes: 0

faino
faino

Reputation: 3224

There are a few ways I can think of, but the easiest would be to wrap it in a function, line your data up in an array, then call the function in a for loop:

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;
}

Upvotes: 0

Paul Bruno
Paul Bruno

Reputation: 1906

This should do it:

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

What we're doing is looping through each element matched by the selector in the original $() call. Then, for each element matched, we're adjusting the animation param, marginLeft, by which element index we're at, starting with the zeroth element.

Upvotes: 2

Related Questions