jquery - 有没有更好的方法来格式化多个事件？

Question

好的，所以我一键在这里发生了多件事，但我想知道是否有更好的格式化或执行方式？

<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

Answer 1

您可以使用this引用单击元素的关键字。当然，您的页面中还有其他 div 或 li 元素，您可以将类添加到您的元素中，以将这些元素与其他元素区分开来。

$('li').click(function(){
    var $this = $(this), ind = $this.index();
    $this.addClass('this').siblings().removeClass('this');
    $('div').hide().eq(ind).show()
});

Answer 2

How about this?

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

Answer 3

$('ul').on('li','click', function(ev) {
    // your code
});

因为这种方法避免了多个事件绑定。jQuery 只是在 UL 元素上查找使 dom 冒泡的单击事件，但如果我错了，请纠正我。