重構和烘乾jQuery代碼

我正在做的是添加一個類到所有與我懸停的id相同的類名的元素。例如，當我懸停一些帶有元音id的列表項目時，所有具有名稱元音類別的span元素都會起作用（添加一個類）。重構和烘乾jQuery代碼

我可以做到這一點沒有問題。但是我想用相應的類名爲許多其他id名做同樣的事情。例如：輔音，半元音，喉音，齶音等

我可以做所有這些不同的功能，但我想要做的是調用一個函數，它將執行相同的任務，但會很聰明，找到id的名稱並從中生成類名。

如何將id名稱提取到變量中並將其分配給類名稱。

來源

2009-11-27 allesklar

我有隻使用CSS或只加入感覺，這同樣的效果可以大大簡化一個類封裝這些孩子的元素。請發佈您的HTML代碼和結構，以便我可以詳細說明。 – duckyflip 2009-11-27 16:11:09

感謝您的關注，但cletus解決了它。我不認爲HTML/CSS本身可以做到。 – allesklar 2009-11-27 17:06:43

你可以這樣做：

$("[id]").hover(function() { 
    $("." + this.id).addClass("highlight"); 
}, function() { 
    $("." + this.id).removeClass("highlight"); 
});

，但我不一定會推薦它。我更傾向於靜態定義它：

var ids = ["vowels", "consonants"]; 
for (var i = 0; i < ids.length; i++) { 
    $("#" + ids[i]).hover(function() { 
    $("." + this.id).addClass("highlight"); 
    }, function() { 
    $("." + this.id).removeClass("highlight"); 
    }); 
}

或類似的東西。

來源

2009-11-27 15:52:16 cletus

我幾乎可以工作，但是「。」 + ids [我]位不做任何事情。在你的代碼的第3行我一直在測試這個代碼，它的工作原理： $（本）的.css（{「光標」：「默認」}）; 但由於某些原因，在同一行以下不工作： $（「＃」 + IDS [I]）的CSS（{ '光標'： '缺省'}）。我希望這會給你一個關於如何進一步幫助我的線索。 – allesklar 2009-11-27 16:39:44

您的第二個解決方案的第3行 – allesklar 2009-11-27 16:50:23

我的意思是第二個代碼段的第4行（四）。 – allesklar 2009-11-27 16:58:18

你可以使用插件：

$.fn.highlight = function() { 
    return this.each(function() { 
     $(this).hover(function() { 
      var id = $(this).attr('id'); 
      $('.'+id).addClass('myclass'); 
     }); 
    }); 
}

，你可以這樣調用：

$(document).ready(function() { 
    $('span').highlight(); 
});

來源

2009-11-27 15:54:33 Steerpike

謝謝Steerpike。我用一些cletus解決方案來使用它的一些解決方案，使其工作。乾杯。 – allesklar 2009-11-27 17:05:45

重構和烘乾jQuery代碼

回答

相關問題