JQuery селектор безумие

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

Вот пример того, что вы ищете: 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

РЕДАКТИРОВАТЬ Переосмысливая то, что я думаю, вы пытаетесь сделать - этот первый отсканированный изменит элемент 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');

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

 var testVal=1;

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

Или другой метод, использующий filter ()

    var testVal=1;

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