Question

编辑 - 对不起，这是非常不清楚的。我想将id放入src中以进行多个悬停事件。

$("#trig1").hover(
  function () { 
    $("#main").attr("src", "trig1.png");
  }, 
  function () {
    $("#main").attr("src", "4.png");
  }
);

$("#trig2").hover(
  function () {
    $("#main").attr("src", "trig2.png");
  }, 
  function () {
    $("#main").attr("src", "4.png");
  }
);

$("#trig3").hover(
  function () {
    $("#main").attr("src", "trig3.png");
  }, 
  function () {
    $("#main").attr("src", "4.png");
  }
);

html

<area id="trig1 2 3 etc.." shape="poly" alt="blah" coords="0,1,2,3,4,...">
<img src="4.png">

我一直在尝试像

这样的东西

$('area').each(function(e)
   {
    $(this).hover(
        function () { 
        $(e).attr("src", $(e).attr("id") + ".png"});
    }, 
    function () {
        $("#main").attr("src", "4.png");
    });

这不起作用，但我真的不明白我在做什么关于功能（e）。有没有一个体面的地方可以阅读这个？

Answer 1

$('#trig1, #trig2, #trig3').hover(
  function () { $('#main').attr('src', this.id.substr(-1) + '.png'); }, 
  function () { $("#main").attr('src', '4.png'); }
);

Answer 2

您似乎将src属性设置为trig1，trig2和trig3而不是.png。

尝试：

$(e).attr("src", ($(e).attr("id").charAt(4) + ".png") });

请注意，这是一个非常脆弱的实现，但是您可以理解并且可能会找到更好的（基于正则表达式的）。

我该如何压缩这段代码？

2 个答案: