如何使用jquery更改以前的div背景色？

我想要做的是，如果一個div被點擊，該div和它的前任有相同的背景顏色。例如，如果點擊「4」 4，3，2和1具有相同的背景色。我試圖做到這一點失敗，我該如何解決它？如何使用jquery更改以前的div背景色？

<style type="text/css"> 
.selectcontainer { 
overflow:hidden; 
display:block; 
} 

.select { 
display:block 
width:50px; 
height:40px; 
background-color:#59758d; 
text-align:center; 
font-family:arial; 
font-weight:bold; 
color:#FFFFFF; 
font-size:24px; 
cursor:pointer; 
padding-top:10px; 
} 
.select:hover { 
border:1px solid #d99c29; 

font-size:32px; 
} 


</style> 
<script type"text/javascript"> 
$(function() { 
$('.select').live('click',function() { 
var i = $(this).attr('id'); 

$('.select').each(function(i){ 
    $('.select').css({'background-color':'green'}); 
}); 

}); 

}); 
</script> 
<div class='selectcontainer'> 

<div class='select' id='1'>1</div> 
<div class='select' id='2'>2</div> 
<div class='select' id='3'>3</div> 
<div class='select' id='4'>4</div> 
<div class='select' id='5'>5</div> 
<div class='select' id='6'>6</div> 


</div>

來源

2011-10-05 user892134

還值得一提的是'id'不應該以數字值開頭。 – f0x

主要錯誤：id是未定義的變量。你必須在它周圍添加引號。

小提琴：http://jsfiddle.net/KPS7a/3/

進一步的改變，以獲得代碼工作：

加引號.attr(id) - >.attr("id")
更名爲var i到var id
改變了內$(".select")到$(this)
改變.css("background-color", "green")到.addClass("green")
增加了一個新的聲明的CSS：在click事件的開始.green { background-color: green}
新增$(".green").removeClass("green")，使顏色將每次點擊重置（以前，每瓦仍然是綠色的，如果你先單擊5，然後1）

來源

2011-10-05 19:19:51

像羅布提到你需要改變id爲「id'因爲ID是不確定的變量。

var i = $(this).attr('id');

您還可以修改您的代碼是這樣的：

$('.select').live('click',function() { 
    $(this).prevAll('div.select').css('background-color', 'green'); 
});

來源

2011-10-05 19:23:24 realshadow

在你的jsfiddle你沒有提到的jQuery

也。我也爲你做了一個修改版本，我認爲它更簡單（但要求你提供的html不變）：http://jsfiddle.net/6386x/

希望它有幫助！

來源

2011-10-05 19:23:32 lnrbob

啊，我c。試試這個 - 簡單的例子：http://jsfiddle.net/6386x/1/ – lnrbob

下面是我如何解決它：http://jsfiddle.net/7w2ft/。 JavaScript看起來像這樣：

$('.select').live('click', function(event) { 
    $(event.target) 
     .css('background-color', 'green')   
     .prevAll('.select') 
     .css('background-color', 'green'); 
});

來源

2011-10-05 19:26:54 Cymen

如何使用jquery更改以前的div背景色？

回答

相關問題