0

サイト ページに 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');
});
4

2 に答える 2

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');
    });
}
于 2014-02-09T13:03:01.800 に答える
0

このソリューションは、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 のバージョンもお知らせください。

于 2014-02-09T13:53:44.207 に答える