Jquery 紧凑悬停函数

我有很多悬停函数，它们也有相同的功能

$('#101').mouseover(function () {
        $('#p1_101').stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_101').stop().animate({"fill-opacity": .7}, 200);
});
$('#102').mouseover(function () {
        $('#p1_102').stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_102').stop().animate({"fill-opacity": .7}, 200);
});
$('#103').mouseover(function () {
        $('#p1_103').stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_103').stop().animate({"fill-opacity": .7}, 200);
});

如何在一个函数中编写此函数

html

这是一张有……的桌子

svg路径有，而且每一条都不同，不可能在这里显示它

这样怎么样：

  function myFunction(var str){
    $('#'+str).mouseover(function () {
      $('#p1_'+str).stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
      $('#p1_'+str).stop().animate({"fill-opacity": .7}, 200);
    });
  }

  myFunction('101');
  myFunction('102');
  myFunction('103');

更新

$.each(['01', '02', '03'], function (index, value) {
    $('#1' + value).hover(
    function () {
        $('#p1_1' + value).stop().animate({"fill-opacity": 1}, 200);
    },
    function () {
        $('#p1_1' + value).stop().animate({"fill-opacity": .7}, 200);
    });
});

---

我将对标记和javascript进行一些调整

HTML（基于给定案例的示例）

---

演示：

如果像您显示的代码一样，要设置动画的元素的id始终是

“p1”

加上悬停元素的id，那么您可以将相同的函数绑定到所有元素，然后在函数中使用

this.id

获取当前悬停元素的id：

$('#101,#102,#103').mouseover(function () {
        $('#p1_' + this.id).stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_' + this.id).stop().animate({"fill-opacity": .7}, 200);
});

---

所有选择器都是“id”，为什么不使用“class”？您的id值无效，@ArunPJohny-html5允许id以数字开头（或完全由数字组成）。您提供的链接指向html4规范。但是如果我有10个以上的id怎么办？我给每个函数01，02，03添加了0，并从悬停的id中删除了0，但它不起作用，为什么？我只是这样做了，就像我说的，我给每个函数01，02，03添加了0，从悬停的id中删除了0，但它不起作用：]就是这样，你知道为什么吗？我认为

1，2，3

是整数，所以当你把它改成

01，02，03

，结果值仍然是

1

，

2

，

3

。所以它不起作用。现在我们将其转换为字符串

'01'、'02'、'03'

，这样就行了。：）

<div class="my-el" pel="#p1_101">101</div>
<p id="p1_101">p1</p>

<div class="my-el" pel="#p1_102">102</div>
<p id="p1_102">p2</p>

<div class="my-el" pel="#p1_103">103</div>
<p id="p1_103">p3</p>

<div class="my-el" pel="#p1_104">104</div>
<p id="p1_104">p4</p>

$(function(){
    $('.my-el').mouseover(function () {
        $($(this).attr('pel')).stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $($(this).attr('pel')).stop().animate({"fill-opacity": .7}, 200);
    });
})

$('#101,#102,#103').mouseover(function () {
        $('#p1_' + this.id).stop().animate({"fill-opacity": 1}, 200);
    }).mouseout(function () {
        $('#p1_' + this.id).stop().animate({"fill-opacity": .7}, 200);
});