javascript - CSS切换按钮逻辑错误

我有一个想要在每次单击时更改的按钮。它工作正常，除了前2次点击没有变化。我的逻辑有什么问题？

 var soc_selected = new Boolean(false);
    $('#soccer-button').click(function() {
          if (soc_selected == false) {
              $('#soccer-button').css('background', 'url(assets/img/sports/soccer_us.png)');
        soc_selected ^= true;
    }
    else if (soc_selected == true){
        $('#soccer-button').css('background', 'url(assets/img/sports/soccer.png)');
        soc_selected ^= true;
    }
    });

最佳答案

为什么需要使用XOR进行所有这些奇怪的操作，这些操作实际上会导致整数，而不是 bool(boolean) 值？

您可以使其更简单:

var soc_selected = false; // not Boolean(false)
$('#soccer-button').click(function() {
    var bg = soc_selected
        ? 'url(assets/img/sports/soccer_us.png)'
        : 'url(assets/img/sports/soccer.png)';

    $('#soccer-button').css('background', bg);

    soc_selected = !soc_selected;
});

我认为，它现在看起来更加透明和清晰。

另一个不错的选择是在CSS类中定义样式并执行以下操作:

$("#soccer-button").click(function() {
    $(this).toggleClass('us');
});

它还将解决必须设置初始背景的问题。

这是working JSFiddle demo。