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

通过多次绑定点击事件，您可以在第二次点击时触发这两个功能。相反，您应该将决定停止/重新加载的逻辑放在一个事件回调中：

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

使用基于数据属性

1 个答案: