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

Question

我在 div 中有一堆段落，其中一个有 read_more link。同一个 div 中 read_more link 之后的所有段落默认隐藏。

点击read_more时，会显示read_more之后的所有段落，并添加read_less link 在最后一段的末尾。单击 read_less 时，它隐藏所有段落，直到 read_more，再次显示 read_more link 并隐藏自己。

我快到了，请看这里：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 link 是不是做错了什么？我可以操纵它、改变颜色等，但点击功能不起作用。

重要的是所有这些都发生在包含它们的 div 中，因为我在其他 div 中有其他段落和其他 read_more 按钮，我不想他们会受到影响。

感谢任何帮助！

Answer 1

由于read_lesslink是动态添加的，所以必须使用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 link。这将简化您的代码如下

$('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

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

Properly adding read_more / read_less links to paragraphs using jquery

html

jquery

paragraph