リファクタリングjQueryの表示/非表示

Question

ユーザーがクリックできるリンクに基づいて表示したり非表示にしたりする一連のdivがあります。これらの機能をリファクタリングして反復性が低い方法はありますか？

トグルを使用している可能性がありますか？

$('#section1').hide(); 
$('#section2').hide(); 
$('#section3').hide(); 
$('#section4').hide(); 

$('#section1-link').click(function() { 
    $('#section1').show(); 
    $('#section2').hide(); 
    $('#section3').hide(); 
    $('#section4').hide(); 
}); 
$('#section2-link').click(function() { 
    $('#section1').hide(); 
    $('#section2').show(); 
    $('#section3').hide(); 
    $('#section4').hide(); 
}); 
$('#section3-link').click(function() { 
    $('#section1').hide(); 
    $('#section2').hide(); 
    $('#section3').show(); 
    $('#section4').hide(); 
}); 
$('#section4-link').click(function() { 
    $('#section1').hide(); 
    $('#section2').hide(); 
    $('#section3').hide(); 
    $('#section4').show(); 
}); 

Answer 1

Working fiddle。

data-*の助けを借りて共通のクラスを使用することをお勧めします。以下の例を確認してください。

これが役に立ちます。

$('.section-link').on('click', function(){ 
 
    var section_id = '#'+ $(this).data('section'); 
 

 
    $('.section').hide(); //Hide all sections 
 
    $(section_id).show(); //Show the related one 
 
})

div:not(#section1){ 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href='#' class='section-link' data-section='section1'>Link 1</a> 
 
<a href='#' class='section-link' data-section='section2'>Link 2</a> 
 
<a href='#' class='section-link' data-section='section3'>Link 3</a> 
 
<a href='#' class='section-link' data-section='section4'>Link 4</a> 
 

 
<div class='section' id='section1'>Section 1</div> 
 
<div class='section' id='section2'>Section 2</div> 
 
<div class='section' id='section3'>Section 3</div> 
 
<div class='section' id='section4'>Section 4</div>