CSS切換按鈕不正確的邏輯

我有一個按鈕，每次單擊它時都要更改它。它工作正常，除了在前兩次點擊中沒有變化。我的邏輯有什麼問題？CSS切換按鈕不正確的邏輯

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

來源

2015-12-15 Reid Barber

我建議你創建類，並使用功能'$ .toggle（）' – Rajesh

你能提供演示？我們很難重現這個問題。 –

對不起，我是一般的新手。讓我快速做到這一點。。。 –

爲什麼你需要所有這些奇怪的操作與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。

來源

2015-12-15 04:23:01

這工作完美！我認爲這部分是因爲我有一個布爾對象。 –

我覺得你在你的第二個條件，如果soc_selected == true意思soc_selected ^= false;。

檢查Fiddle

來源

2015-12-15 04:20:51

您的布爾邏輯可能存在一些問題。

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

來源

2015-12-15 04:27:06 TheLazyChap

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

來源

2015-12-15 04:39:45

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

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

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

來源

2015-12-15 05:02:09 Bijal

CSS切換按鈕不正確的邏輯

回答

相關問題