简化一组鼠标悬停函数jquery答案

【问题标题】：Simplifing a group of mouseover functions jquery简化一组鼠标悬停函数jquery
【发布时间】：2011-06-08 16:59:32
【问题描述】：

首先让我说这是正常工作，但我知道这不是最有效的编码方式，而且我缺乏关于如何做到这一点的知识/理解。

对于这个特定的问题，我有 8 个不同的事件正在使用 mouseover / mouseout 函数，其中隐藏了不是上述悬停的其他类。我很好奇它只需要一个简单的代码块就可以处理无限数量的事件。

任何帮助将不胜感激。到目前为止，这是我的代码...

功能悬停栏（）{ $(".song1result").mouseover(function(){ $('.barReadout').not('.bar1').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar1').fadeTo('fast', 1.0, function() {}); }); $(".song2result").mouseover(function(){ $('.barReadout').not('.bar2').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar2').fadeTo('fast', 1.0, function() {}); }); $(".song3result").mouseover(function(){ $('.barReadout').not('.bar3').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar3').fadeTo('fast', 1.0, function() {}); }); $(".song4result").mouseover(function(){ $('.barReadout').not('.bar4').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar4').fadeTo('fast', 1.0, function() {}); }); $(".song5result").mouseover(function(){ $('.barReadout').not('.bar5').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar5').fadeTo('fast', 1.0, function() {}); }); $(".song6result").mouseover(function(){ $('.barReadout').not('.bar6').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar6').fadeTo('fast', 1.0, function() {}); }); $(".song7result").mouseover(function(){ $('.barReadout').not('.bar7').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar7').fadeTo('fast', 1.0, function() {}); }); $(".song8result").mouseover(function(){ $('.barReadout').not('.bar8').fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ $('.barReadout').not('.bar8').fadeTo('fast', 1.0, function() {}); }); }

谢谢！！马特

编辑：

我从 Shad 的回复中得到了正确的答案，尽管它需要一些修修补补。

这是我的工作解决方案：

功能hoverBar2（）{ $('.songresult').mouseover(function(){ var ID=$(this).attr('id').replace('#',''); var ID2 = ID.replace('res',''); $('.barReadout').not('#bre' + ID2).fadeTo('fast', 0.1, function() {}); }).mouseout(函数(){ var ID=$(this).attr('id').replace('#bre',''); /// 警报（ID）； $('.barReadout').not('#bre' + ID).fadeTo('fast', 1.0, function() {}); }); }

【问题讨论】：

标签： jquery each optimization

【解决方案1】：

如果您可以控制页面内容的呈现方式，那么我建议将标识号从类中移出并移至ids。例如

<div class="songresult" id="res1"></div>
<div class="barReadout" id="bre1"></div>

这将允许您为所有实例编写一个代码块：

$('.songresult').mouseover(function(){
    var ID=$(this).attr('id').replace(/\D/g,'');
   $('.barReadout').not('#bre' + ID).fadeTo('fast', 0.1, function() {}); 
});

【讨论】：

我会将此标记为正确，尽管我的正确解决方案是此答案的派生。请参阅编辑后的副本。
@Matt 我很好奇您为什么要使用更迂回的路线从歌曲结果 id 中提取 id #。 .replace(/\D/g,'') 准确/仅给出字符串中的数字。
我想我的 jquery / javascript 不符合标准。 :)

【解决方案2】：

我对此类问题的解决方案是这样的：

我使用 id-s 代替类：id="songresult_1" 和 id="bar_7"

$("[id^=songresult_]").each(function() {
    var id = $(this).attr("id").split("_")[1];
    $(this).mouseover(function(){
        $('.barReadout').not('#bar_'+id).fadeTo('fast', 0.1, function() {});
    }).mouseout(function(){
        $('.barReadout').not('#bar_'+id).fadeTo('fast', 1.0, function() {});
    });
});

【讨论】：