Mouseenter/Mouseleave简化jQuery

我正在建立一个公司推广网站，页面上有24个地图形状的“热点”，可以打开24个单独的分区。不是我的设计，但我没有足够高的高度来论证我的观点，所以我会坚持下去。一个同事写的代码很可怕（至少我这么认为）---

（x24）

适用于所有24个不同的“热点”和div。所以你可以想象每一个都变成了“.hover2”，“.hover3”等等。。。与“.winner2”和“.winner3”等相同

这个代码大约有120行

我的问题是，由于我不是jQuery专家，如何简化这个问题？我知道一定有办法，我只是不知道

每个div和hot spot都标记为“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>

获胜者：克莱·考利

日期：2012年12月3日

奖品：XBOX 360

代替.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>

---

代替.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>

---

您可以将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或类似内容解析索引。

您可以将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或类似内容解析索引。

如果无法更改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);
};

---

for（i=1；i如果无法更改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);
};

对于（i=1；i假设您可以修改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> 

假设您可以修改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> 

有没有可能允许你写一个循环？你能发布HTML吗？你应该能够从
悬停
元素遍历到
赢家
元素，或者如果没有，你应该能够使用
数据
属性指定相关元素来修改站点是否真的使用了严格唯一的类？？？JanDvorak——任何有助于我可以尝试。不是在每一页上，这是一个特例，这是跟踪所有这些的最简单方法…好吧..废话。@Rorymcrossan是的，我将编辑问题以显示HTML。有没有可能允许您编写循环？您可以发布HTML吗？您应该可以从
悬停
元素遍历到
赢家
>元素，或者如果不是的话，你应该能够使用
data
属性来指定相关元素来修改站点是否真的使用严格唯一的类？？？@JanDvorak——任何有助于我尝试的东西。并且不是在每个页面上，这是一个特例，这是跟踪所有这些的最简单的方法…好吧..废话。@Rorymcrossan是的，我将编辑问题以显示HTML。删除我的答案，因为这是我所做的更好的版本。最佳答案IMHO。@JanDvorak OP编辑了他的答案以添加HTML，他没有声明不能添加changed@RoryMcCrossan谢谢！和我的老板讨论过了，并向他展示了这个方法……因为我真正做的是广告ding the
数据目标
他对更改很满意。非常感谢！@Clay_Cauley没问题，请你的老板在邮件中给我寄支票：D@RoryMcCrossan已经在路上了！你应该有一个非常好的假期：）删除了我的答案，因为这是我所做的更好的版本。最佳答案IMHO。@JanDvorak OP编辑了他的答案以添加HTML，他没有声明不能添加changed@RoryMcCrossan谢谢！和我的老板讨论过并向他展示了这个方法……因为我真正做的就是添加
数据目标
他很好有零钱。非常感谢！@Clay_Cauley没问题，请你的老板在邮件中寄给我支票：D@RoryMcCrossan已经在路上了！你应该有一个非常好的假期：）