jQuery选择器疯狂

Question

下面的代码在class="hole"的所有元素上执行.css({"background":"black"});，但是我试图让它在具有class="hole"和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> 

BTW，为什么这（错误）的代码不工作没有双重包装这一行：

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

编辑 反思我认为你正在尝试做什么 - 这第一个文档片断将改变悬停元素的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(....