根据数据属性用按钮执行不同的操作

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

通过多次绑定点击事件，您将在第二次点击时触发这两个函数。相反，您应该将决定 stop/reload 的逻辑放在一个事件回调中：

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

根据数据属性用按钮执行不同的操作

Perform different actions with a button based on the data attribute

javascript

jquery

jquery-events

custom-data-attribute