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

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

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

Answer 3

这个怎么样？

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

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

3 个答案: