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。

谢谢！

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');
    }
});

Answer 2

事件处理程序在第一页加载时附加到与该选择器匹配的元素，此后更改类不会以任何方式更改事件处理程序，因此您必须认为切换功能完全不同< / p>

$('.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'));

});

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();
      });
    }

我的jQuery仅在页面刷新后才有效

3 个答案: