javascript - 如何改进我的代码？

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 版本。