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

如何改进我的代码？

2 个答案: