按鈕單擊更改背景div

-1

我想要使用Jquery按鈕單擊更改div的backColor。目前，我正在通過改變我的班級來做到這一點。按鈕單擊更改背景div

這裏是我的CSS：

.GreenColor 
{ 

background-color:#00FF00; 
} 

.RedColor 
{ 

background-color:#FF0000; 
}

這裏是我的腳本在我的PHP文件：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"> 
</script> 
<script> 


$(document).ready(function(){ 


$("button").click(function() { 
    $(this).closest("div").toggleClass("RedColor").toggleClass("GreenColor"); 
}); 
}); 
</script>

但不知何故，它什麼都不做。

在這裏可以使用一些幫助;）

來源

2014-02-24 Nick Prozee

請添加相關的html代碼 –

你是如何定義的按鈕？也請顯示HTML，請 – Nenotlep

您可能錯過了「。」或「按鈕」之前的「＃」符號。 – Schokea

可以嘗試像

$("#button").click(function() { 
    $(this).closest("div").toggleClass("RedColor GreenColor"); 
});

甚至嘗試像

$("#button").toggle(function() { 
    $(this).closest("div").removeClass("RedColor").addClass("GreenColor"); 
}, function() { 
    $(this).closest("div").removeClass("GreenColor").addClass("RedColor"); 
});

來源

2014-02-24 12:05:41 Gautam3164

抱歉沒有發佈html。 –

這就是答案。非常感謝 –

@NickProzee，所以你應該正式接受它。 – collapsar

使用.toggleClass（）使用第二參數用於確定是否爲cl屁股應該被添加或刪除。如果此參數的值爲true，則會添加該類;如果爲false，則該類爲已刪除。從本質上說，聲明：

$("button").click(function() { 
     $(this).closest("div").toggleClass("RedColor GreenColor"); 
    });

來源

2014-02-24 12:06:07

的Jquery之證件說

，因爲你應該使用$(':button')選擇：

：按鈕是一個jQuery的擴展，而不是部分的CSS規範，使用：按鈕的查詢無法利用本機DOM querySelectorAll（）方法提供的性能提升。要在使用按鈕選擇元素時實現的最佳性能，請首先使用純CSS選擇器選擇元素，然後使用.filter（「：button」）。

看到小提琴：

http://jsfiddle.net/ravi441988/kE3W8/

來源

2014-02-24 12:13:35 Ravi

按鈕單擊更改背景div

回答

相關問題