简化一组mouseover函数jquery

Question

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

对于这个特定问题，我有 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() {}); 
    });



}

Answer 1

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

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

这将允许您编写 one所有实例的代码块：

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

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