1

我正在为公司推广建立一个网站，页面上有 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>
4

4 回答 4

2

而不是 .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();
});
于 2012-11-28T15:05:33.853 回答
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();
});
于 2012-11-28T15:15:30.063 回答
0

您可以将 mouseenter 和 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 或类似的东西中解析索引。

于 2012-11-28T15:10:14.183 回答
0

如果更改 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);
};
于 2012-11-28T15:15:29.423 回答