Question

我必须div这样：

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

我想对div的Hover事件做同样的事情，让我们说将background更改为黑色：

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

注释行有效，但当我将其中一个悬停时，显然会将div更改为黑色。我想只改变悬停的那个。我没有使用好的id克隆我的悬停函数，而是希望获得悬停的id并动态更改其background。

代码alert(this.id)弹出好的ID，因此this.id有效。

但是$(this.id).css("background", "#000#");没有做任何事情。

JSFiddle sample

Answer 1

由于this 是目标，只需使用$(this).css("background", "#000");

e.g。

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

使用选择器根据建议用自己的id查找当前元素有点傻

事实上，大多数情况下，您甚至不需要ID来执行此类操作，只需使用类来更改样式：

e.g。 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

由于大多数其他答案都建议使用它，因为选择器是完成你在这种情况下要做的事情的正确方法。

＆＃13;

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

＆＃13;

您的代码中存在另一个错误，导致您的原始代码无法正常工作。要使用id进行选择，您需要将哈希符号添加到选择器字符串的开头。

＆＃13;

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

＆＃13;

我只是想我会指出这一点，万一有人想知道为什么原始代码没有用。

Answer 4

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

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

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

4 个答案: