我的jQuery只有在页面刷新后才能正常工作。

Question

我的网站有一个游戏列表。其中一个功能是能够“观看”游戏。这个功能很好用，但是我不能反转观看/取消观看的操作，除非我刷新页面。

以下是我的 jQuery 代码：

$('.watch').click(function(e) {

    e.preventDefault();

    var game_id = $(this).data('game_id');
    $('#game-' + game_id + ' .watch').addClass('unwatch').removeClass('watch');

});

$('.unwatch').click(function(e) {

    e.preventDefault();

    var game_id = $(this).data('game_id');
    $('#game-' + game_id + ' .unwatch').addClass('watch').removeClass('unwatch');

});

有什么想法吗？也许我可以改进我的代码？我还在学习jQuery / Javascript。谢谢！

- Scully

Answer 1

当您编写以下代码行 $('.watch').click(callback); 时，您会将 callback 附加到所有在该行执行时具有 .watch 类的元素。当您稍后更改元素的类别从.watch更改为.unwatch时，它不会附加到您之前为.unwatch元素设置的回调函数。

您需要为所有游戏添加一个类.game，然后：

$('.game').click(function(e) {

    e.preventDefault();

    var game_id = $(this).data('game_id');

    if($('#game-' + game_id).hasClass('unwatch')) {
        $('#game-' + game_id).addClass('watch').removeClass('unwatch');
    } else if ($('#game-' + game_id).hasClass('watch')) {
        $('#game-' + game_id).addClass('unwatch').removeClass('watch');
    }
});

- jillro

Answer 2

事件处理程序在第一次页面加载时附加到与选择器匹配的元素，稍后更改类不会以任何方式更改事件处理程序，因此您必须完全不同地考虑切换功能。

$('.watch').click(function(e) {
    e.preventDefault();

    var game_id = $(this).data('game_id');

    if ( $(this).data('flag') ) {
        $('#game-' + game_id + ' .watch').toggleClass('watch unwatch');
    }else{
        $('#game-' + game_id + ' .unwatch').toggleClass('watch unwatch');
    }

    $(this).data('flag', !$(this).data('flag'));

});

- adeneo

Answer 3

将您的点击事件分为两个不同的函数

使用以下jQuery代码

    //call watch to bind watch click event
    watch();

    // watch method to bind watch class click event
    function watch(){
      $('.watch').click(function(e) {

        e.preventDefault();

        var game_id = $(this).data('game_id');
        $('#game-' + game_id ).addClass('unwatch').removeClass('watch');

        //bind unwatch class click event
        unwatch();
      });
    }

// unwatch method to bind unwatch class click event
    function unwatch(){
      $('.unwatch').click(function(e) {

        e.preventDefault();

        var game_id = $(this).data('game_id');
        $('#game-' + game_id ).addClass('watch').removeClass('unwatch');

        //bind watch class click event
        watch();
      });
    }

- Zainul Abdin