如何提高我的代碼？

Question

我在我的網站頁面上有4個滑塊。 ，我用這個js代碼來實現。 如何改進此代碼？

$('.show1, .show2, .show3, .show4').hide(); 
$('.btn.slide1').click(function(e){ 
    e.preventDefault(); 
    $('.show1').slideToggle(); 
    $('.btn.slide1 span').toggleClass('up'); 
}); 

$('.btn.slide2').click(function(e){ 
    e.preventDefault(); 
    $('.show2').slideToggle(); 
    $('.btn.slide2 span').toggleClass('up'); 
}); 

$('.btn.slide3').click(function(e){ 
    e.preventDefault(); 
    $('.show3').slideToggle(); 
    $('.btn.slide3 span').toggleClass('up'); 
}); 

$('.btn.slide4').click(function(e){ 
    e.preventDefault(); 
    $('.show4').slideToggle(); 
    $('.btn.slide4 span').toggleClass('up'); 
}); 

Answer 1

使用for-loop

for (var i = 1; i <= 4; i++) { 
    $('.show' + i).hide(); 
    $('.btn.slide' + i).click(function(e){ 
     e.preventDefault(); 
     $('.show' + i).slideToggle(); 
     $('.btn.slide' + i + ' span').toggleClass('up'); 
    }); 
} 

Answer 2

此解決方案假定您使用jQuery 1.7或更高版本，並且您的標記類似以下內容：

<div> <!-- or some other containing element --> 
    <span class="btn slide1">Slide 1</span> 
    <span class="btn slide2">Slide 2</span> 
    <span class="btn slide3">Slide 3</span> 
    <span class="btn slide4">Slide 4</span> 
</div> 

的jQuery：

$(document).on('click', '.btn[class*="slide"]', function (e) { 
    var index = $(this).index() + 1, // index is 0-based, so add 1 
     show = '.show' + index,   // concat index to "show" class to get ".show1", ".show2", etc. 
     span = '.btn.slide' + index + ' span'; // same for span selector 
    e.preventDefault(); 
    $(show).slideToggle(); 
    $(span).toggleClass('up'); 
}); 

如果這不起作用，請發佈您的標記樣本，並讓我們知道您定位的是哪個jQuery版本。