jquery - 如何使代码更简单，如果我需要点击 a eq(0) show b eq(0) hide others, a eq(1) show b eq(1) hide others..？

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();
    $('.content div:eq('+$(this).index()+')').show();
});

jsfiddle

Answer 2

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

http://jsfiddle.net/Xepmg/

Answer 3

你可以这样做：

var numClicked = '';

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

虽然我不完全记得它是如何完成的，但还有一种更好的方法。