多个选择器或多个功能 - 任何效率提升？

Question

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

 $('#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" />
<img src="images/International_middleEast_dark.png" class="middleEast" id="middleEastImg"  />

</div>

---

Reigel的答案似乎就是去这里的方式,生病尝试报告回来,欢迎进一步的评论!:)

Answer 1

我，不了解 html，建议这个......

\n\n

$(\'#americasTrigger, #europeTrigger, #middleEastTrigger\').hover(\n    function () {\n        var id = this.id;\n        $(\'#\'+id.replace(\'Trigger\', \'Img\')).fadeIn();\n        //$(\'#\'+id.slice(\'0\',id.indexOf(\'Trigger\'))+\'Img\').fadeIn();\n    },\n    function(){\n        var id = this.id;\n        $(\'#\'+id.replace(\'Trigger\', \'Img\')).fadeOut();\n        //$(\'#\'+id.slice(\'0\',id.indexOf(\'Trigger\'))+\'Img\').fadeOut();\n    }\n);\n

\n\n

您也可以.replace()按照Anurag的建议使用在下面评论中

\n\n\n\n

id =\'europeTrigger\';\nalert(id.slice(\'0\',id.indexOf(\'Trigger\'))); // alerts \'europe\'\n// \'#\'+id.slice(\'0\',id.indexOf(\'Trigger\'))+\'Img\' is \'#europeImg\'\n

\n\n

演示

\n\n

\xe2\x80\x8b

\n