重复JavaScript（jQuery）代码

Question

下面是我正在做的一些简单的事情。我有一些div，分别称为“.item-1”，“.item-2”等。当用户在“.item-1”上悬停时，“＃city-info-1”div滑动，而它当用户悬停时滑落。我足够了解这一点，并且足够了解我编写代码的方式不是最好的方式。只是好奇别人会怎么做，所以我不必每次重复几乎相同的代码。欣赏任何建议:)

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

使用通用的CSS类和附加行为，而不是特定的元素。

实施例：

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

根据您当前的标记，你可以使用start with选择：

说明：选择具有与给定的字符串完全开头的值的指定属性的元素。

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

一个div可以有多个类，所以你可以在每个放入系统的div都有一个共同的类名

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

，所以你可以选择：

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

，请告诉我们你的html，因为这看起来像你可以简单地用css做的事

Answer 4

为每个项目设置一个唯一的ID（只有一些前缀和整数，即'i-666'），并为所有项目设置相同的类别。

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