Question

除了id之外，我有相同名称的cca 150元素。我需要将相同的单击功能绑定到它们。在当前代码中，以下生成150次，但我认为必须有更高效的方式。

重写以下代码的最有效方法是什么？

<script>
    var jizda_1 = $('a#jizda_1');
    jizda_1.click(function(e) {
        e.preventDefault();
        id = 1;
        $('#jizda_' + cisloJizdy + '.active').removeClass('active');
        cisloJizdy = 1;
        if ($(this).hasClass('closed')) { // uzavrena jizda
            generujPoziceUzavreneJizdy(cisloJizdy);

        } else {
            generujPoziceOtevreneJizdy(cisloJizdy);
        }
        $(this).addClass('active');
        $('#detailZakaznika').hide();
        $('#tiskDokladu').addClass('disabled');
        $('#tiskUctenky').addClass('disabled');
    });
    var jizda_2 = $('a#jizda_2');
    jizda_2.click(function(e) {........
    });
</script>

Answer 1

我会更改HTML，以便相关元素共享一个公共类。然后：

$("a.the-class").click(...);

在单击处理程序中，使用this（将是单击的元素），直接（它是DOM元素）或将其包装在jQuery包装器（$(this)）中，以引用具体要素。

Live Example | Source

但可以使用attribute-starts-with选择器通过id的公共部分选择它们：

$('a[id^=jizda_]').click(...);

Live Example | Source

Answer 2

$('[id^="jizda_"]').each(function (k, v) {
    $(this).click(function (e) {
        e.preventDefault();
        id = k+1;
        $('#jizda_' + cisloJizdy + '.active').removeClass('active');
        cisloJizdy = k+1;
        if ($(this).hasClass('closed')) { // uzavrena jizda
            generujPoziceUzavreneJizdy(cisloJizdy);
        } else {
            generujPoziceOtevreneJizdy(cisloJizdy);
        }
        $(this).addClass('active');
        $('#detailZakaznika').hide();
        $('#tiskDokladu').addClass('disabled');
        $('#tiskUctenky').addClass('disabled');
    });
});

Jquery - 具有不同id的多个元素的相同单击函数

2 个答案: