Выполнять различные действия с помощью кнопки, основанной на атрибуте данных

Question

У меня есть одна кнопка. Его первое действие - остановить видео. Затем это изменение значка и статус данных тоже. Его второе действие - перезагрузить страницу.

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

Вот мой Jquery код:

// STOP VIDEO (ACTION 1) 
$("#button").click(function(){ 
    $('#button').attr({ 
     src: 'img/film.png', 
     'data-status':'stop' 
    }); 
}); 

// RELOAD (ACTION 2) 
$("#button[data-status='stop']").click(function() { 
    location.reload(); 
}); 

// OTHER METHOD FOR RELOAD (ACTION 2) 
if ($("#button").data("status", "stop")) { 
    $("#button").click(function() { 
     location.reload(); 
    }); 
} 

Вот мой HTML код:

<img id="button" src="skip.png" data-status="play"> 

Можете ли вы мне помочь?

Answer 1

Связывая событие click несколько раз, вы запускаете обе функции во втором клике. Вместо этого вы должны поместить логику, которая решает остановиться/перезагрузить внутри обратного вызова одного события:

$("#button").click(function(){ 
    var button = $(this); 

    if(button.attr('data-status') === 'stop') { 
     // Already stopped 
     location.reload(); 

    } else { 
     // Stop 
     button.attr({ 
      src: 'img/film.png', 
      'data-status':'stop' 
     )}; 
    } 
)};