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(....