CSS 切换按钮的错误逻辑

Question

我有一个按钮，每次点击都想要改变它的样式。它工作得很好，除了前两次点击后没有变化。我的逻辑哪里出错了？

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

- Reid Barber

---

我建议您创建一个类并使用函数$.toggle()。 - Rajesh

你能提供演示吗？我们很难复现这个问题。 - Just code

抱歉，我对 JS 一般不熟悉。让我快速处理一下…… - Reid Barber

Answer 1

为什么需要使用XOR进行奇怪的操作，最终结果是整数而不是布尔值？

可以更简单地实现：

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

这还可以解决需要设置初始背景的问题。

这里是工作中的JSFiddle演示。

- Yeldar Kurmangaliyev

---

这个完美地运行了！我认为部分原因是因为我有一个布尔对象。 - Reid Barber

Answer 2

你可能在布尔逻辑方面遇到了一些问题。

var soc_selected = new Boolean(false);

这行代码实际上创建了一个布尔对象，而不是简单的基本类型。

因此，在这里进行第一次行比较时，评估的是名称而不是它的值，因此在你的代码中条件实际上是。

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

- TheLazyChap

Answer 3

我觉得你的第二个条件应该是 soc_selected ^= false;，如果soc_selected == true。请查看Fiddle。

- Nikolay Ermakov

Answer 4

var soc_selected = new Boolean(false);
$(document).ready(function(){
    $('#soccer-button').click(function() {
      if (soc_selected == false) {
         $('#soccer-button').css('background', 'yellow');
  soc_selected ^= true;
 }
 else if (soc_selected == true){
   $('#soccer-button').css('background', 'red');
   soc_selected ^= true;
 }
  });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="soccer-button">click me</button>

- Bijal