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