Question

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

对于这个特定问题，我有8个不同的事件正在使用鼠标悬停/鼠标悬停功能，其中它隐藏了不是所述悬停的其他类。我很好奇，只需要一个简单的代码块就能说出无数的事件。

非常感谢任何帮助。这是我到目前为止的代码......

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

谢谢！马特

编辑：

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

这是我的工作解决方案：


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

如果您可以控制页面内容的呈现方式，那么我建议您将识别号码从类中移出id。 e.g。

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

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

在函数jquery上简化一组鼠标

2 个答案: