내 코드를 향상시키는 방법?

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 버전을 타겟팅하는지 알려주십시오.