1

以下のコードをよりシンプルでより少なくする方法は？

ありがとう。

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

3 に答える 3

2

これを試して

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

jsfiddle

于 2013-01-17T05:02:54.630 に答える
2 
$(".btn div").click(function () {
   $(".content div").hide().eq($(".btn div").index(this)).show();
});

http://jsfiddle.net/Xepmg/

于 2013-01-17T05:03:35.813 に答える
1

次のようなことができます。

var numClicked = '';

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

私はそれがどのように行われたかを完全に思い出せませんが、さらに良い方法があります。

于 2013-01-17T05:13:55.293 に答える