通過單擊來切換背景顏色更改

我很快在做一個jsFiddle以瞭解關於jQuery API的更多信息，並且小提琴不按我期望的方式工作。通過單擊來切換背景顏色更改

HTML：

<div></div>

CSS：

div { 
background:red; 
height:100px; 
width:150px; 
}

JS：

$('div').click(
    function(){ 
     $(this).toggle(function(){ 
      $(this).style.background="blue"; 
     } 
     //function(){ 
     //this.style.background = "orange"; 
     //} 
     ); 
    } 
);

奇怪的是，當我點擊的div消失，如果我不開心對草圖完全不起作用的評論線進行評論。任何建議或信息表示讚賞。

來源

2012-12-25 David West

你在哪裏鏈接到jsFiddle？ –

http://jsfiddle.net/7j5Fc/ –

有時，只需閱讀文檔可以幫助很多：http://api.jquery.com/toggle-event/。但是，請注意，此方法已棄用。 –

你不需要包裹toggle()在click()方法，只需使用：

$('div').toggle(
    function(){ 
     $(this).css('background-color', 'blue'); 
    }, 
    function(){ 
     $(this).css('background-color', 'red'); 
    });

JS Fiddle demo。

此外，你的jQuery混合和JavaScript：

jQuery的$(this)對象沒有style方法;這需要使用css()方法;這兩種方法是不能互換的，因此你可以要麼使用css()的方法（上文），或用普通的JavaScript粘：

this.style.backgroundColor = 'blue';

例如，或從jQuery的切換到普通的JavaScript：

$(this)[0].style.backgroundColor = 'blue';

或者：

$(this).get(0).style.backgroundColor = 'blue';

這兩種方法基本上檢索來自jQuery對象，其允許使用本地JavaScript方法平原DOM節點/對象，它母鹿但是，這意味着你不能在這些節點/對象上使用jQuery方法（當然，除非你將它們重新包裝在一個jQuery對象中）。

當然，如果你只是想使用jQuery來處理該事件的委派，您可以使用click()方法，加上三元：

$('div').click(function(){ 
    this.style.backgroundColor = this.style.backgroundColor == 'blue' ? 'red' : 'blue'; 
});

JS Fiddle demo。

參考文獻：

來源

2012-12-25 19:09:47

不知道downvote來自哪裏，很好的答案 – MarioDS

這是因爲（我*認爲*，因爲沒有評論），在我的初稿中，我沒有看到純粹的JavaScript鏈接到jQuery的混合;這是當之無愧的投票（但謝謝！）= D –

這是一個很好的答案。謝謝。 'this.style.background ='藍色';'也適用。注意到我在'function（）'之間忘記了兩個逗號。 –

您剛剛使用了錯誤的切換。有兩種toggle S：

toggle Event

和

toggle Effect

在你的代碼，切換效果分別執行它只是顯示/隱藏的元素。這就是它點擊它時會消失的原因。

來源

2012-12-25 19:18:13

通過單擊來切換背景顏色更改

回答

相關問題