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

Question

I have to div like this:

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

I want to do the same thing on Hover event for both div , let's say change the background to black:

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

The commented line works, but obviously change both div to black when I hover one of them. I want to change only the hovered one. Instead of cloning my hover function with good id s, I want to get the id of the hovered one and change its background dynamically.

The code alert(this.id) pops up the good id, so this.id works.

But $(this.id).css("background", "#000#"); doesn't do anything.

JSFiddle sample

Answer 1

As this is the target, just use $(this).css("background", "#000");

eg

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

It is a bit silly to use a selector to find the current element by its own id as suggested

In fact, most of the time, you do not even need IDs to do this sort of operation, just use classes to change the styling:

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

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

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

Answer 2

You just need to use $(this)

When you are in a function like this, using $(this) will apply to the current element the event applies to.

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

});

Updated JSFiddle - http://jsfiddle.net/cLws40vr/4/

Answer 3

As most of the other answers have suggested using this as the selector is the correct way to accomplish what you are trying to do in this case.

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

There is another error in your code that was causing your original code not to work. To select using an id you need to add the hash symbol to the beginning of the selector string.

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

I just thought I would point that out in case anyone was wondering why the original code didn't work.

Answer 4

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

Fiddle http://jsfiddle.net/cLws40vr/5/