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进行所有这些奇怪的操作，这实际上导致整数，但不是布尔值？

你可以更简单：

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。

Answer 2

我认为如果soc_selected ^= false;，您的第二个条件就是soc_selected == true。

检查Fiddle

Answer 3

您的布尔逻辑可能存在一些问题。

var soc_selected = new Boolean(false);

这一行实际上创建了一个布尔object，与一个简单的原语相反。

所以当你第一次在这里进行线比较时。评估soc_selected 名称，而不是其值，因此代码中if条件实际为true == false。

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

Answer 4

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 ^= false;
  }
});

Answer 5

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>

CSS Toggle Button不正确的逻辑

5 个答案: