Как сократить такую jquery запись?

Question

[Капитан Какао]

Есть такой код:

$('#wpu1').hover(function(){$('#epu1').toggle();});
 $('#wpu2').hover(function(){$('#epu2').toggle();});
 $('#wpu3').hover(function(){$('#epu3').toggle();});
 $('#wpu4').hover(function(){$('#epu4').toggle();});
 $('#wpu5').hover(function(){$('#epu5').toggle();});

Подскажите пожалуйста как его сократить, думаю по любому есть вариант, что бы не создавать для каждого функцию или ещё что-то. Язык только учу, по этому обращаюсь за подсказкой к вам.

Answer 1

[Дмитрий Новиков]

for (var i = 1; i < 6; i++) {
$('#wpu'+i).hover(function(){$('#epu'+i).toggle();});
}

Comments

[Виталий Инчин ☢]

Дмитрий, Дмитрий.... jsfiddle.net/a2gngfku ...

Answer 2

[Nikolay Talanov]

Какие-то извращения люди предлагают, страшно жить в таком мире.
Есть 2 варианта:
1) CSS :hover - этот самый адекватный.
2) Если вы извращаетесь и вам надо именно на js, то убираете нафиг все убогие id у элементов, пишите нормальные классы, и к элементам, при наведении на которое должна срабатывать анимация, добавляете атрибуты data-id="*" где * это номер элемента (любым циклом можно такой html вывести).
Финальный код будет выглядеть так:

$(document).on("click", ".wpu", function() {
  var id = $(this).data("id");
  $(".epu-"+id).toggle();
});

Comments

[Ilya Bobkov]

через класс несомненно лучше

Answer 3

[Ilya Bobkov]

// можно так

function myhover( id1, id2 )
{
 $(id1).hover(function(){$(id2).toggle();});
}

myhover( "wpu1", "epu1" );
myhover( "wpu2", "epu2" );
myhover( "wpu3", "epu3" );
myhover( "wpu4", "epu4" );

Можно ещё с массивом поэкспериментить.

Answer 4

[Виталий Инчин ☢]

//Бредово
for (var i = 1; i < 6; i++) {
  $('#wpu'+i).hover(function(){
        var id = this.id.split("wpu")[1];
        $('#epu'+id).toggle();
  });
}

или

for (var i = 1; i < 6; i++) {
  (function(id){
    $('#wpu'+id).hover(function(){
       $('#epu'+id).toggle();
    });
  })(i);
}

или

//Не кроссбраузерно
for (var i = 1; i < 6; i++) {
    $('#wpu'+id).hover((function(){
       this.toggle();
    }).bind( $('#epu'+i) ));
}

или

function hoverPU(id){
   $("#wpu"+id).hover(function(){
      $("#epu"+id).toggle();
   });
}

for(var i = 1; i < 6; i++) hoverPU(i);

или

//Психически ненормально
function hoverPU(i, p){
   $("#wpu"+i).hover(function(){
       $("#epu"+i).toggle();
   });
   i < p && hoverPU(++i, p);
}

hoverPU(1, 5);

Answer 5

[Максим Степанов]

Я бы вообще предложил бы сделать это на цсс3. С помощью свойства translate. Если интересует, то пишите, помогу)

Comments

[Капитан Какао]

Как делать через css знаю, интересует именно jquery, так как сейчас изучаю и практикую именно его)

[Максим Степанов]

Ну в вашем случае, мне кажется, финальная запись кода зависит от положения элементов друг относительно друга. Может предоставите разметку?)