簡化一組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

回答

相關問題