JQuery點擊+這不工作

Question

我已經複製了一段代碼。我對網絡語言很陌生，來自java背景。

JQuery似乎很棒，但我無法弄清楚如何解決這個問題。

http://jsfiddle.net/MMf9Q/2/

謝謝。

Answer 1

我已經更新了你的小提琴，因爲我認爲你期待它。

我刪除了if/else語句和簡單使用的jQuery切換能力（http://api.jquery.com/toggle/）。創建了一個我希望對象轉換爲的類。我發現這使代碼更清潔和有組織。

固定碼： http://jsfiddle.net/MMf9Q/6/

的jQuery：

$('#clickme').click(function(){ 
     $(this).toggleClass('red'); 
    }) 

Answer 2

使用$（本）來訪問此元件作爲jQuery對象

$('#clickme').click(function(){ 

    var color = $(this).css('background-color'); 

    if(color == '#cc0000'){ 
     $(this).css('background', '#00CC00'); 
    }else{ 
     $(this).css('background', '#CC0000'); 
    } 
}) 

Answer 3

撥弄

http://jsfiddle.net/nTXPC/

CSS

.red { 
background:#CC0000; 
} 
.green { 
background:#00CC00; 
} 

HTML

<div id="clickme" class="red"> Click me </div>​ 

JS

$('#clickme').click(function(){ 

    $(this).toggleClass('red green'); 

});​ 

Answer 4

戈登，你的代碼有湊它的一些問題。首先是你需要將this換成$()。這代表#clickme元素。其次，您對背景的要求比您期望的要詳細得多。你可以用alert或console.log返回什麼來找出爲什麼你的if語句不像你所期望的那樣。 As seen here.

更新：這裏是updated approach：

$('#clickme').click(function() { 
    var color = $(this).css('backgroundColor'); 
    if(color == "rgb(0, 204, 0)") { 
     $(this).css('backgroundColor', '#CC0000'); 
    }else{ 
     $(this).css('backgroundColor', '#00CC00'); 
    } 
});​ 

Answer 5

正如其他人所說，應該是$（本），而不是這個。爲了提高性能，我還建議將$（this）保存到另一個變量中。在這裏可能沒有必要這樣做，但這是一個很好的習慣，尤其是如果你在循環播放某些內容。事情是這樣的：

$('#clickme').click(function(){ 

    var clickedElement = $(this); 
    var color = clickedElement.css('background'); 

    if(color == '#cc0000'){ 
     clickedElement.css('background', '#00CC00'); 
    }else{ 
     clickedElement.css('background', '#CC0000'); 
    } 
})​ 

Answer 6

它應該是這樣的

$('#clickme').click(function(){ 

    var color = $(this).css('background-color'); 

    if(color == '#cc0000'){ 
     $(this).css('background-color', '#00CC00'); 
    }else{ 
     $(this).css('background-color', '#CC0000'); 
    } 
})​; 

Answer 7

使用$（本），而不是這個。它代表選擇器。

Answer 8

Answers21241和iambriansreed有可愛的答案，這給你什麼試圖完成。

但是對於你的代碼，我想提供一些啓動建議。

首先，這裏是你原來的JavaScript代碼：

$('#clickme').click(function(){ 

    var color = this.css('background'); 

    if(color == '#cc0000'){ 
     this.css('background', '#00CC00'); 
    }else{ 
     this.css('background', '#CC0000'); 
    } 
})​ 

1）你必須包裝在$(function(){});你的代碼，以便jQuery的頁面加載後執行。否則，你的JavaScript代碼會被執行滿載DOM之前，它根本不會在大多數情況下工作：

$(function(){ 
    $('#clickme').click(function(){ 
     var color = this.css('background-color'); 
        alert(color); 
     if(color == '#CC0000'){ 
      this.css('background-color', '#00CC00'); 
     }else{ 
      this.css('background-color', '#CC0000'); 
     } 
    }); 
});​ 

2）this.css()將無法​​正常工作。 .css()是一個jquery對象的函數，在這種情況下這不是一個jquery對象。您必須$()包裝它從任何DOM元素構造一個jQuery對象：

$(function(){ 
    $('#clickme').click(function(){ 
     var color = $(this).css('background-color'); 
     if(color == '#CC0000'){ 
      $(this).css('background-color', '#00CC00'); 
     }else{ 
      $(this).css('background-color', '#CC0000'); 
     } 
    }); 
});​ 

3）顏色值可能是一些比你給的不同。瀏覽器主要將十六進制顏色值轉換爲RGB值，所得到的結果會有所不同。嘗試alert(color);以獲得價值，並相應地更改您的代碼。

$(function(){ 
    $('#clickme').click(function(){ 
     var color = $(this).css('background-color'); 
        alert(color); 
     if(color == '#CC0000' || color == 'rgb(204, 0, 0)'){ 
      $(this).css('background-color', '#00CC00'); 
     }else{ 
      $(this).css('background-color', '#CC0000'); 
     } 
    }); 
});​ 

這裏是最後fiddle：

這將幫助你瞭解什麼是錯的。此外，這種方式並不是最佳做法。使用toggleClass並在CSS中設置您的元素的樣式。 Answers21241和iambriansreed給出了很好的方法。