Jquery optimize the usage of this jquery code

Question

Hi i have below html structure,

<div>
<p><a class="bypasstab0" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab1" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab2" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab3" href="#box_collateral_0_6">Show More</a></p>
.....
</div>

And this is my script,

        $('.bypasstab0').click(function(e){
            e.preventDefault();
            $('.tabitemli6 a').click();
            $('#tab_item-0').click();
            $('html, body').animate({
                scrollTop: $("#dettitle").offset().top
            }, 2000);
        });

        $('.bypasstab1').click(function(e){
            e.preventDefault();
            $('.tabitemli6 a').click();
            $('#tab_item-1').click();
                        $('html, body').animate({
                scrollTop: $("#dettitle").offset().top
            }, 2000);
        });

        $('.bypasstab2').click(function(e){
            e.preventDefault();
            $('.tabitemli6 a').click();
            $('#tab_item-2').click();
                    $('html, body').animate({
                scrollTop: $("#dettitle").offset().top
            }, 2000);
        });

        $('.bypasstab3').click(function(e){
            e.preventDefault();
            $('.tabitemli6 a').click();
            $('#tab_item-3').click();
                    $('html, body').animate({
                scrollTop: $("#dettitle").offset().top
            }, 2000);
        });
                ...............
                ...............

How to make above code as shorthand ? Only class name is different in all cases. Is there any way to auto increment above codes ? So that i can reduce the usage of codes

did anybody know how to do this ?

Answer 1

I would suggest you to use data-* to store id which you can use in event handler and use a single class for binding event

HTML

<div>
<p><a class="bypasstab" data-id="0" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab" data-id="1" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab" data-id="2" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab" data-id="3" href="#box_collateral_0_6">Show More</a></p>
.....
</div>

Script

$('.bypasstab').click(function(e){
    e.preventDefault();
    $('.tabitemli6 a').click();
    $('#tab_item' + $(this).data('id')).click();
    $('html, body').animate({
        scrollTop: $("#dettitle").offset().top
    }, 2000);
});

Answer 2

You can add a common class to all the elements bypasstabx elements so that we can add a single click handler to them, then add a data-* property data-item to specify the item selector that need to be used

<div>
    <p><a class="bypasstab bypasstab0" data-item="#tab_item-0" href="#box_collateral_0_6">Show More</a></p>
    <p><a class="bypasstab bypasstab1" data-item="#tab_item-1" href="#box_collateral_0_6">Show More</a></p>
    <p><a class="bypasstab bypasstab2" data-item="#tab_item-2" href="#box_collateral_0_6">Show More</a></p>
    <p><a class="bypasstab bypasstab3" data-item="#tab_item-3" href="#box_collateral_0_6">Show More</a></p>
</div>

then

$('.bypasstab').click(function (e) {
    e.preventDefault();
    $('.tabitemli6 a').click();
    $($(this).data('item')).click();
    $('html, body').animate({
        scrollTop: $("#dettitle").offset().top
    }, 2000);
});

Answer 3

Use starts with selector $("[attribute^='value']")

Answer 4

If your anchors only has one class, then you can do something like this:

$("a[class^='bypasstab']").each(function () {
    $(this).click(function (e) {
        var num = $(this).attr('class').match(/\d+$/);
        e.preventDefault();
        $('.tabitemli6 a').click();
        $('#tab_item-' + num).click();
        $('html, body').animate({
            scrollTop: $("#dettitle").offset().top
        }, 2000);
    });
});

http://api.jquery.com/attribute-starts-with-selector/

But actually, I'd suggest you to use data-* attribute like others answer.

Answer 5

With HTML:

<div>
<p><a class="bypasstab" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab" href="#box_collateral_0_6">Show More</a></p>
<p><a class="bypasstab" href="#box_collateral_0_6">Show More</a></p>
.....
</div>

And With Javascript:

$('.bypasstab').click(function(e){
    e.preventDefault();
    $('.tabitemli6 a').click();
    $('#tab_item-' + $(this).parent().index()).click();
    $('html, body').animate({
        scrollTop: $("#dettitle").offset().top
    }, 2000);
})

Best thing about this approach is that you needn't any extra attributes to your HTML code.

Note: The indices are zero-based (start with zero), you can always add a + 1 if you want it to be one-based (start with one)

Answer 6

Try this:

function  my_function(bypasstab_class, tabitemli_class, tab_item_id)
    $('.'+bypasstab_class).click(function(e){
        e.preventDefault();
        $('.'+tabitemli_class).click();
        $('#'+tab_item_id).click();
        $('html, body').animate({
            scrollTop: $("#dettitle").offset().top
        }, 2000);
    });

Then call your function properly and it should work fine!