0

さて、ここではワンクリックで複数のことが起こっていますが、フォーマットする、またはそれを行うためのより良い方法があるかどうか疑問に思っていますか？

<ul><li>Hello</li><li>Welcome</li><li>Howdy</li></ul>
<div class="first">Goodbye</div><div class="second">See ya</div><div class="third">Later Gator</div>

$('li:first-child').click(function(){
$('li:nth-child(2)').removeClass('this');
$('li:nth-child(3)').removeClass('this');
$('.second').hide();
$('.third').hide();
$('li:first-child').addClass('this');
$('.first').show(); });

それぞれ、このようにすると、他の人がクリックされたときに同じプロセスが必要になります。

jsfiddle

4

3 に答える 3

1

thisクリックされた要素を参照するキーワードを使用できます。確かに、ページには他のdivまたはli要素があります。これらの要素を他の要素と区別するクラスを、要素に追加できます。

$('li').click(function(){
    var $this = $(this), ind = $this.index();
    $this.addClass('this').siblings().removeClass('this');
    $('div').hide().eq(ind).show()
});
于 2013-01-12T18:05:22.320 に答える
0 
$('ul').on('li','click', function(ev) {
    // your code
});

このアプローチは複数のイベントバインディングを回避するためです。jQueryは、DOMをバブルアップするUL要素のシングルクリックイベントを探すだけですが、間違っている場合は修正してください。

于 2013-01-12T18:08:44.200 に答える
0

これはどう？

$('li:first-child').click(function(){
    $(this).addClass('this').next().removeClass('this').next().removeClass('this');
    $('.second, .third').hide();
    $('.first').show(); 
});
于 2013-01-12T18:14:41.617 に答える