javascript - CSS 切换按钮不正确的逻辑

Question

我有一个按钮，每次单击它时我都想更改它。它工作正常，除了它在前 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;
    }
    });

Answer 1

为什么您需要对 XOR 进行所有这些奇怪的操作，这实际上会产生整数，而不是 bool 值？

你可以让它更简单:

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 .