Question

我正在为公司推广建立一个网站，页面上有24个地图形状的“热点”，可以打开24个独立的div。不是我的设计，但是我不够高，不能争辩我的情况，所以我要坚持下去。一个同事写的代码是可怕的（至少我是这么认为的）---

$(".hover1").mouseenter(function(){
    $(".winner1").fadeIn();
}).mouseleave(function(){
    $(".winner1").stop().fadeOut();
});

（X24）

对于所有24个不同的“热点”和div。所以你可以想象每一个都改为“.hover2”，“。hover3”等......和“.winner2”，“。winner3”等一样......

此代码约为120行。

我的问题，因为我不是一个jQuery专家，所以如何简化这个？我知道必须有办法，我只是不知道。

每个div和热点标记为 - “hover1”/“winner1”，“hover2”/“winner2”等 - 并且以这种方式连接。

非常感谢任何帮助，谢谢先进!!

： - ）

修改

这是HTML

对于地图

<map name="Map">
    <area shape="rect" coords="6,1,258,232" class="hover1"/>
</map>

所以当你将鼠标悬停在那上面时，会显示

<div class="winner1 badge male">
    <div class="winnerText">
        <p><span>Winner:</span> Clay Cauley</p>
        <p><span>Date:</span> December 3<sup>rd</sup>, 2012</p>
        <p><span>Prize:</span> XBOX 360</p>
    </div>
</div>

Answer 1

不是.hover和.winner的唯一类，而是做这样的标记：

<div class="container">
    <div class="hover">
        Hovercontent #1
    </div>

    <div class="winner">
        Winnercontent #1
    </div>
</div>

<div class="container">
    <div class="hover">
        Hovercontent #2
    </div>

    <div class="winner">
        Winnercontent #2
    </div>
</div>

然后写下你的javascript。

$('.hover').on('mouseenter', function() {
    $(this).siblings('.winner').fadeIn();
}.on('mouseleave', function() {
    $(this).siblings('.winner').stop().fadeOut();
});

Answer 2

假设你可以修改HTML，试试这个：

<map name="Map">
    <area shape="rect" coords="6,1,258,232" class="hover" data-target="winner1" />
    <area shape="rect" coords="2,2,2,2" class="hover" data-target="winner2" />
    <area shape="rect" coords="3,3,3,3" class="hover" data-target="winner3" />
    <area shape="rect" coords="4,4,4,4" class="hover" data-target="winner4" />
    <area shape="rect" coords="5,5,5,5" class="hover" data-target="winner5" />
</map>

$(".hover").hover(function() {
    $("." + $(this).data("target")).fadeIn();
},
function() {
    $("." + $(this).data("target")).stop().fadeOut();
});

Answer 3

您可以将mousenter和mouseleave事件附加到所有热点，并确定应在您的函数中显示/隐藏哪个div。这假设当您说它们被“标记”时，您的意思是id或其他HTML属性。像 -

这样的东西

$("map").mouseenter(function(event){
    var index = [some function to find the index of the event.target]; // For example, the index of "hover1" is 1
    $("winner" + index).fadeIn();
}).mouseleave(function(event){
   var index = [some function to find the index of the event.target];
   $("winner" + index).stop().fadeOut();
})

Javascript字符串解析函数应该很容易找到，以完成从id或类似的东西解析索引。

Answer 4

如果无法更改HTML，并且类形成序列，您仍然可以在循环中附加处理程序。请记住为处理程序捕获迭代变量（或连接字符串".winner"+i）的值：

for(i=1;i<=24;i++){
  (function(i){
    $(".hover"+i).mouseenter(function(){
      $(".winner"+i).fadeIn();
    }).mouseleave(function(){
      $(".winner"+i).stop().fadeOut();
    });
  }(i);
};

Mouseenter / Mouseleave简化jQuery

4 个答案: