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

时间:2014-02-22 12:37:29

标签: jquery

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

2 个答案:

答案 0 :(得分:4)

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

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

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

Live Example | Source

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

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

Live Example | Source

答案 1 :(得分:0)

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