Question

The following code performs .css({"background":"black"}); on all elements with class="hole", however I’m trying to get it to do it on elements with class="hole" AND data-hole-key="[hole_key_variable]".

What’s missing?

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>

BTW, why does this (faulty) code not work at all without double wrapping this line:

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

Answer 1

Here’s a working jsfiddle of what I believe you’re looking for:
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');
    }
);

And for this:

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

That would return the key wrapped in jquery, so for the first element you would get $(1)