компактная функция парения

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

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

UPDATE

$.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 2

Как насчет как это:

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 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> 

Script

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

Demo : Fiddle

Answer 4

Если, как и в коде, который вы показываете, элемент, который должен быть анимирован, всегда имеет идентификатор, который равен "p1_", плюс идентификатор зависающего элемента, тогда вы можете связать одни и те же функции со всеми элементами, а затем просто получить идентификатор в настоящее время зависающий элемент, используя 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); 
});