Question

嗨我有html结构，

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

这是我的剧本，

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

如何将上面的代码作为速记？在所有情况下，只有班级名称不同。有没有办法自动增加上面的代码？这样我就可以减少代码的使用

有人知道怎么做吗？

Answer 1

我建议你使用data-*来存储你可以在事件处理程序中使用的id，并使用单个类来绑定事件

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>

脚本

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

您可以向所有元素bypasstabx元素添加公共类，以便我们可以向它们添加单击处理程序，然后添加data-*属性data-item以指定{{ 1}}需要使用的选择器

item

然后

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

Answer 3

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

Answer 4

使用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>

使用Javascript：

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

此方法的最佳之处在于您无需为HTML代码添加任何额外属性。

注意：索引从零开始（从零开始），如果您希望它基于一个（从一开始），您总是可以添加+ 1

Answer 5

如果您的锚只有一个类，那么您可以这样做：

$("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/

但实际上，我建议你像其他人一样使用data-*属性回答。

Answer 6

试试这个：

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

然后正确调用您的功能，它应该可以正常工作！

Jquery优化了这个jquery代码的用法

6 个答案: