重构和烘干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代码

回答

相关问题