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();
});

有一种更好的方法虽然我不能完全记住它是如何完成的。

如何使代码更简单，如果我需要单击一个eq（0）show b eq（0）隐藏其他人，一个eq（1）show b eq（1）隐藏其他人...？

3 个答案: