Code JavaScript répétitif (jQuery)

Question

Voici quelque chose de simple que je fais. J'ai des div, chacun appelé ".item-1", ".item-2", etc. Quand l'utilisateur passe sur ".item-1", la div "# city-info-1" glisse vers le haut, tandis que glisse vers le bas lorsque l'utilisateur s'arrête. J'en savais assez pour le faire, et j'en sais assez que la façon dont je l'ai codé n'est pas la meilleure. Juste curieux de savoir comment les autres feraient cela, je n'ai donc pas besoin de répéter pratiquement le même code à chaque fois. Appréciez toutes les suggestions :)

$('#city-info-1, #city-info-2, #city-info-3, #city-info-4, #city-info-5, #city-info-6, #city-info-7').hide(); 

    $('.item-1').hover(function() { 
     $('#city-info-1').stop().slideToggle(400); 
    }, function() { 
     $('#city-info-1').hide(); 
    }); 

    $('.item-2').hover(function() { 
     $('#city-info-2').stop().slideToggle(400); 
    }, function() { 
     $('#city-info-2').hide(); 
    }); 

    $('.item-3').hover(function() { 
     $('#city-info-3').stop().slideToggle(400); 
    }, function() { 
     $('#city-info-3').hide(); 
    }); 

    $('.item-4').hover(function() { 
     $('#city-info-4').stop().slideToggle(400); 
    }, function() { 
     $('#city-info-4').hide(); 
    }); 

    $('.item-5').hover(function() { 
     $('#city-info-5').stop().slideToggle(400); 
    }, function() { 
     $('#city-info-5').hide(); 
    }); 

    $('.item-6').hover(function() { 
     $('#city-info-6').stop().slideToggle(400); 
    }, function() { 
     $('#city-info-6').hide(); 
    }); 

    $('.item-7').hover(function() { 
     $('#city-info-7').stop().slideToggle(400); 
    }, function() { 
     $('#city-info-7').hide(); 
    }); 

Answer 1

Utilisez une classe CSS générique et attachez-y un comportement plutôt que des éléments spécifiques.

Exemple:

http://jsfiddle.net/K3mbE/1/

Javascript:

$('.slider').hover(function() { 
  $(this).find('div').stop().slideToggle(400); 
}, function() { 
  $(this).find('div').hide(); 
}); 

HTML:

<div class="slider">Seattle 
    <div>It rains a lot</div> 
</div> 
<div class="slider">New York 
    <div>Greatest city on earth</div> 
</div> 
<div class="slider">Trantor 
    <div>Greatest city in the galexy</div> 
</div>  

Answer 2

basé sur vous en cours de balisage, vous pouvez utiliser start with sélecteur:

Description: Sélectionne les éléments qui ont l'attribut spécifié avec une valeur commençant exactement avec une chaîne donnée.

$('div[id^=city-info]').hide(); 

$('div[class^=item]').hover(function() { 
     var cls = $(this).attr('class').replace('item', "") 
     $('#city-info' + cls).stop().slideToggle(400); 
    }, function() { 
     $('#city-info' + cls).hide(); 
}); 

Answer 3

un div peut avoir la classe multiple de sorte que vous pouvez avoir chacun thoses divs ont un nom de classe commune

<div class="item item-1"></div> 
<div class="item item-2"></div> 
<div class="item item-3"></div> 
... 

de sorte que vous pouvez sélectionner:

$('.item').hover(function() { 
     ... 
    }, function() { 
     .... 
    }); 

s'il vous plaît nous montrer votre html, parce que cela ressemble à quelque chose que vous pouvez simplement faire avec css

Answer 4

Définissez un ID unique (seulement un préfixe et le nombre entier, c'est-à-dire 'i-666') pour chacun si l'élément et définissez la même classe pour tous.

$('.item').hover(function() { 
    var item_id = item.attr('id'); 
    $('#city-info-' + item_id).stop().slideToggle(400); 
}, function() { 
    $('#city-info-' + item_id).hide(); 
});