单击jQuery addClass to <li>时

Question

当单击a.more时，我试图向li添加一个类。但它不起作用。

        <ul>
            <li id="post-4" class="post">
                <div class="text">
                    <span class="date">12/12/2013</span>
                    <h3>The Title</h3>
                    <div class="post-excerpt">
                    <p>The excerpt will show</p>
                        <a class="more" href="#">read more..</a>
                    </div>
                    <div class="post-content">
                    <p>The full content</p>
                    <a class="less" href="#">close</a>
                    </div>
                </div>
            </li>
        </ul>

jQuery：

jQuery(function () {
   jQuery('.post').on('click', 'a.more', function(){
       jQuery(this).addClass('active');
   });
   jQuery('.post').on('click', 'a.less', function() {
       jQuery(this).removeClass('active');
   });
});

Answer 1

加上父母()。在李上加一个班

jQuery('.post').on('click', 'a.more', function(){
   jQuery(this).parents('li').addClass('active');
});
jQuery('.post').on('click', 'a.less', function() {
  jQuery(this).parents('li').removeClass('active');
});

试试上面的代码。

Answer 2

使用parents()添加和删除class of li

jQuery('.post').on('click', 'a.more', function(){
    jQuery(this).parents('li').addClass('active');
});
jQuery('.post').on('click', 'a.less', function() {
    jQuery(this).parents('li').removeClass('active');
});

Answer 3

由于用户在任何时候只能看到这两个链接中的一个，所以可以使用一个函数。

jQuery('.post').on('click', 'a.more, a.less', function() {
  jQuery(this).closest('li').toggleClass('active');
});