简化一组mouseover函数jquery

让我先说这个工作正常，但我知道这不是编码它的最有效的方式，我缺乏关于如何做到这一点的知识/理解。简化一组mouseover函数jquery

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

任何帮助将不胜感激。这里是我的代码迄今...

 
function hoverBar() { 

    $(".song1result").mouseover(function(){ 
      $('.barReadout').not('.bar1').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar1').fadeTo('fast', 1.0, function() {}); 
    }); 

     $(".song2result").mouseover(function(){ 
      $('.barReadout').not('.bar2').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar2').fadeTo('fast', 1.0, function() {}); 
    }); 

     $(".song3result").mouseover(function(){ 
      $('.barReadout').not('.bar3').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar3').fadeTo('fast', 1.0, function() {}); 
    }); 

    $(".song4result").mouseover(function(){ 
      $('.barReadout').not('.bar4').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar4').fadeTo('fast', 1.0, function() {}); 
    }); 

     $(".song5result").mouseover(function(){ 
      $('.barReadout').not('.bar5').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar5').fadeTo('fast', 1.0, function() {}); 
    }); 

     $(".song6result").mouseover(function(){ 
      $('.barReadout').not('.bar6').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar6').fadeTo('fast', 1.0, function() {}); 
    }); 

     $(".song7result").mouseover(function(){ 
      $('.barReadout').not('.bar7').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar7').fadeTo('fast', 1.0, function() {}); 
    }); 

     $(".song8result").mouseover(function(){ 
      $('.barReadout').not('.bar8').fadeTo('fast', 0.1, function() {}); 
     }).mouseout(function(){ 
      $('.barReadout').not('.bar8').fadeTo('fast', 1.0, function() {}); 
    }); 
}

谢谢!!马特

编辑：

我是导致从沙德的回答正确的答案，虽然它需要进行一些修修补补的。

这是我工作的解决方案：

 

function 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(function(){ 
      var ID=$(this).attr('id').replace('#bre',''); 
     /// alert(ID); 
    $('.barReadout').not('#bre' + ID).fadeTo('fast', 1.0, function() {}); 
    }); 



}

来源

2011-06-08 Matt Nathanson

如果你的页面内容的呈现方式控制，那么我会建议移动识别号码的开出的类，进入id秒。例如

<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() {}); 
});

来源

2011-06-08 17:05:44 Shad

我将mark thi虽然我的正确解决方案是这个答案的衍生物，但它是正确的。请参阅编辑的副本。 – 2011-06-08 17:44:46

@Matt我很好奇你为什么使用更迂回的路线从songresult id中提取id＃。 '.replace（/ \ D/g，''）'给出/只有字符串中的数字。 – Shad 2011-06-08 18:50:31

我的jQuery/JavaScript是不符合鼻烟我想。 :) – 2011-06-22 17:28:29

我对这样的问题soltution是这样的：

而不是类我使用ID- s：id="songresult_1" and 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() {}); 
    }); 
});

来源

2011-06-08 17:07:14 aorcsik

简化一组mouseover函数jquery

回答

相关问题