javascript - 使用 this.id 更改一个 ID 的 CSS

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当我悬停其中一个时变黑。我只想更改悬停的那个。而不是用 good id 克隆我的悬停功能s，我想得到 id悬停的那个并改变它的background动态地。

代码alert(this.id)弹出好的 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 来执行此类操作，只需使用类来更改样式即可:

例如http://jsfiddle.net/TrueBlueAussie/cLws40vr/8/

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

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