jquery - コンパクトホバー機能

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

これを1つの関数で書く方法??

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

デモ：フィドル

Answer 4

表示するコードのように、アニメーション化する要素のIDに、ホバーする要素のIDを加えたものが常に含まれている"p1_"場合は、同じ関数をすべての要素にバインドして、現在のIDを取得できます。this.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);
});