小编dem*_*ish的帖子

我想知道是否可以使下面的代码更简洁:

 $('#americasTrigger').hover(
  function () {
          $('#americasImg').fadeIn()
      },
  function(){
          $('#americasImg').fadeOut()
  }
  );

$('#europeTrigger').hover(
  function () {
      $('#europeImg').fadeIn();
  },
  function(){
      $('#europeImg').fadeOut();
  }
  );    

$('#middleEastTrigger').hover(
  function () {
      $('#middleEastImg').fadeIn();
  },
  function(){
      $('#middleEastImg').fadeOut();
  }
  );    

//More etc

每个国家/地区名称保持不变,并在末尾添加"触发器"或"Img".这里有很多重复,这表明我不会采用这种最佳方式.

我有想法:

• 创建一个案例场景,或
• 以某种方式将选择器用于选择,使其成为一个字符串,拆分它的名称以捕获正在使用的国家,并将其应用于嵌套的fadeIn/Out函数,最后使用'Img'.

这可能还是我太过花哨？

编辑1:非常感谢所有回复,对于没有发布html道歉,我已经把这个轰动了.总之,我在bg图像(地球)上使用图像映射作为悬停触发器,用于淡入/淡出我绝对定位的悬停图像.

<div class="mapTub"> 

  <img src="images/transparentPixel.png" class="mapCover" usemap="#worldMap" width="524px" height="273px"/>

  <map name="worldMap" id="worldMap">
    <area id="americasTrigger" shape="poly" coords="1,2,3" href="#americas" />
    <area id="europeTrigger" shape="poly" coords="4,5,6" href="#europe" />
    <area id="middleEastTrigger" shape="poly" coords="7,8,9" href="#middleEast" />
  </map>

<img src="images/International_americas_dark.png" class="americas" id="americasImg" />
<img src="images/International_europe_dark.png" class="europe" id="europeImg" /> …