如何使代碼更簡單，如果我需要點擊一個eq（0）顯示b eq（0）隱藏其他，一個eq（1）顯示b eq（1）隱藏其他..？

Question

如何讓下面的代碼更簡單，更少？

謝謝。

<div class="btn"><div>0</div><div>1</div><div>2</div></div> 
<div class="content"><div>0</div><div>1</div><div>2</div></div> 

$('.btn div:eq(0)').click(function(){ 
    $('.content div').hide(); 
    $('.content div:eq(0)').show(); 
}); 
$('.btn div:eq(1)').click(function(){ 
    $('.content div').hide(); 
    $('.content div:eq(1)').show(); 
}); 
$('.btn div:eq(2)').click(function(){ 
    $('.content div').hide(); 
    $('.content div:eq(2)').show(); 
}); 
$('.btn div:eq(3)').click(function(){ 
    $('.content div').hide(); 
    $('.content div:eq(3)').show(); 
}); 

Answer 1

$(".btn div").click(function() { 
    $(".content div").hide().eq($(".btn div").index(this)).show(); 
}); 

http://jsfiddle.net/Xepmg/

Answer 2

試試這個

$('.btn div').click(function(){ 
    $('.content div').hide(); 
    $('.content div:eq('+$(this).index()+')').show(); 
}); 

jsfiddle

Answer 3

你可以做這樣的事情：

var numClicked = ''; 

$('.btn div').on('click', function() { 
    numClicked = $('.btn div').index(this); 
    $('.content div').hide(); 
    $('.content div').eq(numClicked).show(); 
}); 

儘管我不能完全記得它是如何完成的，但還有更好的辦法。