Что не так с этим кодом?

Question

[Роман]

Доброе время суток! Ни как не могу понять... Подскажите, что не так с этим кодом? Почему он срабатывает только один раз для каждой ссылки?

https://jsfiddle.net/e4xLmah3/4/

Comments

[sim3x]

Что не так с кодом?

Answer 1

[ned4ded]

Все просто, ты пытаешься работать с html data=* атрибутом через .data() метод jquery, что не совсем одно и тоже.

Сделай это через метод .attr(). Например, если исправить код вот здесь:

var action = $(this).attr('data-action');

то твой пример заработает (т.е. id у тебя нигде не используется).

Почему не работает .data()? А вот почему:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

Т.е. используется этот метод только для сбора данных со страницы единожды, далее с этими данными работать можно только через .data() метод внутри jquery (изменять, удалять, дополнять).

Comments

[Роман]

Благодарю за разъяснения. Все теперь работает как задумано.

Answer 2

[coderisimo]

$("a[data-banner]").click(function(e) {
    e.preventDefault();

    var id = $(this).data('banner');
    var action = $(this).data('action');
    
    console.log(id, action); // вот здесь видно что старый код не работал из-за........ см дальше)))

    if (action == 1) {

//установка атрибута data делается так :
        $(this).data('action', '0').removeClass('label-warning').addClass('label-success').text(' Включен ');
    } else {
        $(this).data('action', 1).removeClass('label-success').addClass('label-warning').text(' Выключен ');
    }
});