使用 jquery 正确添加 read_more / read_less 到段落的链接

Question

我在一个 div 中有一堆段落，其中一个有一个 read_more 链接。默认情况下，同一 div 中 read_more 链接之后的所有段落都被隐藏。

当点击 read_more 时，它会显示 read_more 之后的所有这些段落，并在最后一个段落的末尾添加一个 read_less 链接。当点击 read_less 时，它会隐藏所有段落，直到 read_more，再次显示 read_more 链接并隐藏自身。

我快到了，请看这里：http://jsfiddle.net/g8tevwb1/

$('p').find('a.read_more').parent().nextAll().hide();

$('a.read_more').click(function(){
    $(this).parent().nextAll().show();
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>');
    $(this).hide();
    return false;
});

$('a.read_less').click(function(){
    $(this).parent().prevUntil('a.read_more').hide();
    $(this).hide();
    return false;
});

我只是无法让 read_less 工作。以这种方式附加 read_less 链接我做错了什么吗？我可以操纵它，改变颜色等，但点击功能不起作用。

重要的是，所有这些都发生在它们所在的 div 中，因为我在其他 div 中还有其他段落以及其他 read_more 按钮，我不希望它们受到影响。

感谢任何帮助！

Answer 1

由于read_less链接是动态添加的，所以必须使用jQuery的.on()方法。

$('p').find('a.read_more').parent().nextAll().hide();

$('p').on('click', 'a.read_more', function(){
    $(this).parent().addClass('first');
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>');
    $(this).parent().nextAll().show();
    $(this).hide();
    return false;
});

$('p').on('click', 'a.read_less', function(){
    $(this).parent().prevUntil('p.first').andSelf().hide();
    $('a.read_more').show();
    $(this).remove();
    return false;
});

Fiddle

我还更正了read_less 点击回调中的一个小错误。我认为这是您想要的行为。这是一个与动态添加元素相关的post。

注意

如果不是严格要求，您可以避免动态添加和删除read_less 链接。这将简化您的代码如下

$('p').find('a.read_more').parent().nextAll().hide();

$('a.read_more').click(function(){
    $(this).parent().addClass('first');
    $(this).parent().nextAll().show();
    $(this).hide();
    return false;
});

$('a.read_less').click(function(){
    $(this).parent().prevUntil('p.first').andSelf().hide();
    $('a.read_more').show();
    return false;
});

Fiddle