변경 CSS this.id

Question

이 같은 div에 있습니다

나는 모두 div에 대한 호버 이벤트에 같은 일을 할

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

이의 블랙에 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");

예컨대

$('.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"); 
}); 

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");

난 그냥 내가 경우 누구라도 그 지적 것이 원래의 코드가 작동하지 않았는지 궁금 생각했다.