Question

我有一张地图，上面有一堆链接图片。它们都具有相同的图像，具有不同的位置。

<div id="map" class="small-12 large-9 left">
 <img src="a-map.jpg">
  <a class="city1"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city2"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city3"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city4"><img class="large-12 small-8" src="fundita-mov.png"></a>
  <a class="city5"><img class="large-12 small-8" src="fundita-mov.png"></a>
</div>

他们的CSS（你明白了）

#map a{position:absolute;}
a.cityx{left: 35%;top: 26%;}

当您悬停或点击任何图片链接时，附加到该特定链接的某些信息会在侧边栏中显示。

 <div id="map-hover-result" class="small-12 large-3 left">
  <ul>
   <li id="city1" class="hidden">some info here</li>  
   <li id="city2" class="hidden">some info here</li> 
   <li id="city3" class="hidden">some info here</li>  
   <li id="city4" class="hidden">some info here</li> 
   <li id="city5" class="hidden">some info here</li>
  </ul></div>

我处理“隐藏”类的方式是这样的。有什么办法可以优化吗？

 <script> $("a.city1").hover(function(){$('#city1').toggleClass('hidden');});
           $("a.city1").click(function(){$('#city1').toggleClass('hidden');});
          $("a.city2").hover(function(){$('#city2').toggleClass('hidden');});
           $("a.city2").click(function(){$('#city2').toggleClass('hidden');});
          $("a.city3").hover(function(){$('#city3').toggleClass('hidden');});
           $("a.city3").click(function(){$('#city3').toggleClass('hidden');});
          $("a.city4").hover(function(){$('#city4').toggleClass('hidden');});
           $("a.city4).click(function(){$('#city4').toggleClass('hidden');});
          $("a.city5").hover(function(){$('#city5').toggleClass('hidden');});
           $("a.city5").click(function(){$('#city5').toggleClass('hidden');});
 </script>

Answer 1

假设（如您的HTML所示）a元素只有一个类名，并且该类名等于id的{{1}}：

li

JS Fiddle demo

参考文献：

Attribute-starts-with ([attribute^="value"]) selector。

Answer 2

将data-*属性添加到指向右侧city的所有链接，并为它们提供所有通用类

<a data-city="city1" class="city"><img class="large-12 small-8" src="fundita-mov.png"></a>
<a data-city="city2" class="city"><img class="large-12 small-8" src="fundita-mov.png"></a>

然后使用1个单选择器（你也可以链接2个方法）：

$("a.city").hover(function(){$('#' + $(this).data('city')).toggleClass('hidden');})
       .click(function(){$('#' + $(this).data('city')).toggleClass('hidden');});

您甚至可以使用.on

进一步清理它

$("a.city").on('hover click',function(){$('#' + (this).data('city')).toggleClass('hidden');});

Answer 3

您可以在单个功能中设置mouseover，mouseout和click事件

$("#map").find('a').on('mouseover mouseout click', function (e) {
    e.preventDefault();
    var cl = $(this).attr('class');
    $('#' + cl).toggleClass('hidden');
});

JSFiddle

Answer 4

将脚本更改为

$('#map').on('mouseenter mouseleave click', 'a[class^="city"]', function(){
   var classname = $(this).attr('class');
   $('#' + classname).toggleClass('hidden');
})

演示http://jsfiddle.net/9dHR7/

优化Javascript代码

4 个答案: