更改CSS使用一個ID this.id

Question

我不得不div這樣的：

<div class="vignettes" id="vignette1"></div> 
<div class="vignettes" id="vignette2"></div> 

我想做的事情上懸停事件同樣的事情都div，讓我們說改變background爲黑色：

$('.vignettes').hover(function() 
{ 
    //$('.vignettes').css("background", "#000"); 
    $(this.id).css("background", "#000"); 
}, 
function() 
{ 
}); 

註釋行可以工作，但是當我將其中一個懸停時，顯然會將div更改爲黑色。我只想改變懸停的一個。我不想用好的ids克隆我的懸停功能，而是想要獲得懸停的懸停功能id並動態更改其background。

代碼alert(this.id)彈出好身份證，所以this.id的作品。

但$(this.id).css("background", "#000#");什麼也沒做。

JSFiddle sample

Answer 1

作爲this是目標，只要使用$(this).css("background", "#000");

例如

$('.vignettes').hover(function() 
{ 
    $(this).css("background", "#000"); 
}, 
function() 
{ 
}); 

這是一個有點傻使用一個選擇器，找到自己的ID當前元素的建議

事實上，大多數時候，你甚至不需要ID來做到這一點操作種類，只是用班級來改變造型：

eg http://jsfiddle.net/TrueBlueAussie/cLws40vr/8/

$('.vignettes').hover(function() { 
    $(this).addClass("selected"); 
    console.log("test"); 
}, 

function() { 
    $(this).removeClass("selected"); 
}); 

Answer 2

你只需要使用$(this)

當你在這樣的功能，使用$(this)將適用於該事件應用於當前元素。

$('.vignettes').hover(function() 
{ 
    $(this).css("background", "#000"); 
}, 
function() 
{ 

}); 

更新的jsfiddle - http://jsfiddle.net/cLws40vr/4/

Answer 3

$(this).css("background", "#000"); 
alert($(this).attr('id')); 

小提琴http://jsfiddle.net/cLws40vr/5/

Answer 4

由於大部分其他的答案都以此爲選擇建議是完成你正在嘗試做正確的方式這個案例。

$(this).css("background", "#000");

。在你的代碼，另一個錯誤是造成你原來的代碼無法正常工作。要選擇使用一個id，你需要在選擇器字符串的開頭添加散列符號。

$('#' + this.id).css("background", "#000");

我只是想我要指出這一點的情況下，任何人想知道爲什麼原來的代碼沒有工作。