jQuery selector madness

Question

Следующий код выполняет .css({"background":"black"}); на всех элементах с class="hole", однако я пытаюсь заставить его сделать это на элементах с class="hole" AND data-hole-key="[hole_key_variable]".

Что не хватает?

JQuery:

// on elements with class "hole" hovered 
$('.hole').hover(
    function(){ 
     // get the data value of the currently hovered element 
     var holeKey = $($(this).data('holeKey')); 
     // on all elements with that class "hole" and specified data value, change bgcolor 
     $('.hole').data(holeKey).css({"background":"black"}); 
    }, 
    function(){ 
     var holeKey = $($(this).data('holeKey')); 
     $('.hole').data(holeKey).removeAttr('style'); 
    } 
); 

HTML:

<td class="hole" data-hole-key="1">text</td> 
<td class="hole" data-hole-key="2">text</td> 
<td class="hole" data-hole-key="3">text</td> 

Кстати, почему это (неисправный) код не работает вообще без двойной обертки этой линии:

var holeKey = $($(this).data('holeKey')); 

Answer 1

Вот рабочий jsfiddle о том, что я считаю, что вы ищете: http://jsfiddle.net/XKs4a/

// on elements with class "hole" hovered 
$('.hole').hover(
    function(){ 
     // get the data value of the currently hovered element 
     var holeKey = $(this).data('holeKey'); 
     // on all elements with that class "hole" and specified data value, change bgcolor 
     $('.hole[data-hole-key=' + holeKey + ']').css({"background":"black"}); 
    }, 
    function(){ 
     var holeKey = $(this).data('holeKey'); 
     $('.hole[data-hole-key=' + holeKey + ']').removeAttr('style'); 
    } 
); 

И для этого:

var holeKey = $($(this).data('holeKey')); 

Это будет возвращать ключ, обернутый в JQuery, так что для первого элемента, вы получите $ (1)

Answer 2

EDIT Переосмысливая то, что, я думаю, вы пытаетесь сделать, это первый отрезала изменит парил элемент CSS только

$('.hole').hover(
    function(){ 

    $(this).css({"background":"black"}); 
    }, 
    function(){ 

     $(this).removeAttr('style'); 
    } 
); 

, где ваш код вызывает проблемы

Эта часть здесь не собирается возвращать значение, потому что вы обернув его в JQuery, и значение будучи обернута не селектор

// get the data value of the currently hovered element 
    var holeKey = $($(this).data('holeKey')); 

Для того, чтобы получить значение из данных элементов

// get the data value of the currently hovered element 
    var holeKey = $(this).data('holeKey'); 

Чтобы выделить $ ('отверстие.) На основе его значения данных, вы могли бы сделать что-то вроде этого:

var testVal=1; 

    $('.hole[data-hole-key="'+ testVal+'"]').hover(..... 

Или другой метод с использованием фильтра()

var testVal=1; 

    $('.hole').filter(function(){ 
      return $(this).data('data-hole-key')==testVal;     
    }).hover(....