Question

我有一堆悬停功能，它们做同样的事情

$('#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

thwre是一张桌子，.......

和svg路径有，而且每个都不同，这里不可能显示

Answer 1

这样怎么样：

  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');

Answer 2

$.each([1, 2, 3], function (index, value) {
    $('#10' + value).hover(
    function () {
        $('#p1_10' + value).stop().animate({"fill-opacity": 1}, 200);
    },
    function () {
        $('#p1_10' + value).stop().animate({"fill-opacity": .7}, 200);
    });
});

<强>更新

$.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);
    });
});

Answer 3

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

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

<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);
    });
})

演示：Fiddle

Answer 4

如果在您显示的代码中，要动画的元素始终具有"p1_"的id加上正在悬停的元素的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);
});

紧凑的悬停功能

4 个答案: