如果/ else不能在jQuery中使用點擊事件

我是jQuery的初學者，並且嘗試了一點樂趣。我試圖製作一個按鈕，當點擊時會改變頁面的背景，並且改變按鈕的文字。我只需要兩種情況： - 如果按鈕顯示「1」，將按鈕更改爲「2」，將背景更改爲黑色; - 如果按鈕顯示「2」，將按鈕更改爲「1」，將背景更改爲白色;如果/ else不能在jQuery中使用點擊事件

我的代碼適用於第一次點擊，但不能多次點擊。

我做錯了什麼？謝謝你的時間。

http://jsfiddle.net/6fRbM/7/

這是我的HTML

<body> 
<button id="lumiere">1</button> 
</body>

這是我的腳本

$(function() { 
    $('#lumiere').bind('click', function(event) { 
     if ($('#lumiere:contains("1")')) { 
      $('body').css('background-color', "black") 
      $('#lumiere').html('2') 
     } 
     else if ($('#lumiere:contains("2")')) { 
      $('body').css('background-color', "white") 
      $('#lumiere').html('1') 
     } 
    } 
    ); 
} 
);

來源

2013-06-28 Baralai

你的if語句將始終返回true，因爲即使你的查詢返回任何元素，它會仍然給你一個jQuery對象。嘗試檢查 '長度' 屬性，而不是：

$(function() { 
    $('#lumiere').bind('click', function(event) { 
     if ($('#lumiere:contains("1")').length) { 
      $('body').css('background-color', "black"); 
      $('#lumiere').html('2'); 
     } 
     else if ($('#lumiere:contains("2")').length) { 
      $('body').css('background-color', "white"); 
      $('#lumiere').html('1'); 
     } 
    }); 
});

來源

2013-06-28 15:19:14 nderscore

雖然我讚揚你真正說明問題（不像大多數jQuery的發佈用戶），我不得不說，我覺得好笑的是，雖然jQuery的驕傲本身通過更少的代碼實現更多的功能，我已經設法執行與LESS代碼中沒有jQuery相同的任務。 –

@Kolink我只是在回答問題。這不是開始Vanilla和jQuery辯論的地方。 – nderscore

是的，這是RAEG ...沒錯，我在開玩笑。你會得到一個+1，我通常不會給jQuery的答案;） –

$(function() { 
$('#lumiere').bind('click', function(event) { 
    var v = parseInt($('#lumiere').text()); 

    if (v === 1) { 
     $('body').css('background-color', "black") 
     $('#lumiere').html('2') 
    } 
    else if (v === 2) { 
     $('body').css('background-color', "white") 
     $('#lumiere').html('1') 
    } 
} 
);

} ）;

來源

2013-06-28 15:19:48

請不要在沒有任何解釋的情況下發布代碼。 –

我想建議你使用Vanilla JS這個任務，它是非常容易使用，更有效：

window.onload = function() { // if you place the script after the element, 
          // you can remove this line and the corresponding } 
    document.getElementById('lumiere').onclick = function() { 
     document.body.style.backgroundColor = this.firstChild.nodeValue == 1 ? "black" : "white"; 
     this.firstChild.nodeValue = 3-this.firstChild.nodeValue; 
    }; 
};

來源

2013-06-28 15:20:09

這有額外的好處，尊重DRY^_^ –

非常感謝您的參與Kolink。只要我完全正確地學習jQuery，我一定會看看Vanilla JS;） – Baralai

在你考慮jQuery之前，你應該真正學習Vanilla，尤其是在jQuery使用Vanilla之後。 –

重構了一下你的代碼：

$(function() { 
    $('#lumiere').click(function(event) { 
     var $this = $(this); 
     if ($this.text() === '1') { 
      $('body').css('background-color', "black"); 
      $this.text('2'); 
     } 
     else if ($this.text() === '2') { 
      $('body').css('background-color', "white"); 
      $this.text('1'); 
     } 
    }); 
});

的優化是：

bind()舊，用on()代替
使用click()快捷
沒有必要重複您的回調中選擇，只需使用this
ID選擇是最快的國家之一，千萬不要錯過利用這個機會：包含過濾
你不」根本不需要過濾器，因爲它沒有按照你的想法進行。它測試您傳遞的參數是包含文本中的，而不是等於。所以，如果您需要後者，請改爲使用text()。

來源

2013-06-28 15:22:32

如果你打算使用'$ this'進行優化，當然你也可以優化重複調用'.text（）'？：p –

其實一次被用作吸氣劑，第二次被用作吸氣劑。那麼如何優化它呢？ –

你是一個粗暴的人，它只是5行代碼，你的人有什麼問題。 –

很高興看到您使用的是jQuery。這是一個非常強大的工具，使用起來非常有趣。請嘗試以下操作：

HTML：

<body> 
    <button id="lumiere">1</button> 
</body>

保持你的HTML作爲是。

CSS：

在<head></head>部分添加此一等級<style type="text/css"></style>塊的內部或在連接的像這樣<link type="text/css" rel="stylesheet" href="external-sheet-name.css" />外部CSS文件。

.bodyRed { 
    background-color: red; 
}

該類將在以下JavaScript邏輯中使用。

的JavaScript：

修改JavaScript這樣的：

var $body = $('body'), 
    $button = $('#lumiere'); 

$button.on('click', function(event) { 
    if($body.hasClass('bodyRed')) { 
     $body.removeClass('bodyRed'); 
     $button.text('2'); 
    } else { 
     $body.addClass('bodyRed'); 
     $button.text('1'); 
    } 
});

說明：

前兩個語句引用存儲到你的兩個jQuery的對象。這很有用，因爲它提供了一種讓jQuery在每次都不需要重新遍歷DOM的情況下引用對象的方法。從長遠來看，這是更高效的。

對代碼的第二種修改是將bind更改爲on。 .on()是用於附加事件處理程序的更新，更高效且更受歡迎的方法。上面的鏈接將帶您到.on()的文檔。

第三個修改是通過使用上面創建的類去除對inline CSS的需求。這也簡化了邏輯。如果<body>標籤具有該類，請將其刪除並更改按鈕文本。否則，添加它，然後修改按鈕文本。

這就是它的全部。要看到它在實際運行，請查看此實況fiddle。

祝你好運，快樂的編碼！ :)

來源

2013-06-28 15:30:50 War10ck

非常感謝您的時間和幫助！ – Baralai

有沒有必要這麼多併發症......

$(function() { 
    $('#lumiere').bind('click', function(event) { 
      var n = $('#lumiere').text(); 
      switch (n) { 
      case '1': 
       $('body').css('background-color', "black"); 
      $('#lumiere').text(2); 
       break; 
      case '2': 
       $('body').css('background-color', "white"); 
      $('#lumiere').text(1); 
       break; 
      }    
    }); 
});

來源

2013-06-28 18:22:15

對於不好的縮進感到抱歉！ –

如果/ else不能在jQuery中使用點擊事件

回答

相關問題