Несколько селекторов jQuery связаны с одним и тем же событием с небольшим изменением

Question

Несколько селекторов jQuery связаны с одним и тем же событием с небольшим изменением

0

Я знаю, что разделение списка селекторов с запятой на самом деле связывает множественные селекторы с одним и тем же событием или что-то еще. Так что не проблема здесь.

Проблема здесь в том, что я хочу сделать что-то немного другое, в зависимости от того, какой щелчок был нажат.

Например, у меня есть две ссылки:

<a href="#" data-do="add">Add</a>
<a href="#" data-do="delete">Delete</a>

Тогда у меня есть селектор, подобный этому:

$('[data-do="add"], [data-do="delete"]').click(function() {
    // do same stuff
});

Для data-do="add" я хочу сделать немного другую обработку внутри события. Например, если бы я мог как-то спросить, содержит ли $(this) add, а затем что-то изменить в событии и предотвратить обычный поток.

Просто зная, как узнать, какая ссылка была нажата внутри события, я мог бы сделать все остальное с помощью простых операторов if. Проблема в том, что я не знаю, как это сделать.

Любая помощь будет оценена по достоинству.

Dugi 24 фев. 2014, в 11:40

Источник

Теги:

javascript

jquery

4 ответа

1

$('[data-do="add"], [data-do="delete"]').click(function() {
    if ($(this)).attr("data-do") == "add"){
         // do something for add
    } 
    if ($(this)).attr("data-do") == "delete"){
         // do something for delete
    } 
});

Он также должен работать с "данными"...

$('[data-do="add"], [data-do="delete"]').click(function() {
    if ($(this)).data("do") == "add"){
         // do something for add
    } 
    if ($(this)).data("do") == "delete"){
         // do something for delete
    } 
});

Это работает? :)

Gromish 24 фев. 2014, в 08:04

0

$('[data-do="add"], [data-do="delete"]').click(function() {
    var elementType = $(this).data("do") == "add" ? "ADD":"DELETE";
    alert(elementType); //Switch by elementType
});

JS Fiddle: http://jsfiddle.net/9n8gp/

Kevin Bowersox 24 фев. 2014, в 08:07

0

$('[data-do="add"], [data-do="delete"]').click(function() {
    // do same stuff

    /* you could use a simple if */
    if (this.dataset.do === 'add') {

    }

    /* or even a more complex switch */
    switch (this.dataset.do) {
       case 'add': 
          /* specific code for add */ 
          break;
       case 'delete': 
          /* specific code for delete */ 
          break;

    }
});

вы можете прочитать атрибут с this.dataset.do, сохраняя пару вызовов jQuery.

Вот некоторые тесты производительности по data-* атрибутов data-*

fcalderan 24 фев. 2014, в 08:05

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-24T09-11-00.000Z

this внутри обработчика события относится к щелканному элементу, поэтому вы можете использовать this для ссылки на элемент с щелчком

$('[data-do="add"], [data-do="delete"]').click(function () {
    //general code
    if ($(this).data('do') == 'add') {
        //something special
    }
});