动态创建的“阅读更多”链接可扩展所有内容，而不仅仅是一个

Question

我尝试编写的代码如下：

1. 查找给定班级的每个div
2. 如果其中之一恰好高于我的最大值，请将其设置为75px高并隐藏溢出，然后在此特定的过大元素后添加“阅读更多链接”。
3. 使链接正常工作...

我成功了。 2.但是，单击链接会从所有div向下扩展的内容开始扩展所有div的内容。

我究竟做错了什么？

提前致谢！

        $(function() {
            $('.text').each(function() {
                var content = $(this).find('.text_content');
                if(content.outerHeight() >75) {
                    content.css('height','75px').css('overflow','hidden');
                    content.after('<div class="text_readmore">read more</div>');
                    $('.text_readmore').each(function() {
                        $(this).click(function() {
                            content.css('height','').css('overflow','');
                        });
                    });
                }
            });
        });

Answer 1

您正在.click处理程序中使用content变量，该变量未指向所需的内容。 您也可以重构代码，以便为所有此类text_readmore链接定义一次.click处理程序，以提高效率。

尝试这样的事情：

$(function() {
    $('.text').each(function() {
        var content = $(this).find('.text_content');
        if(content.outerHeight() >75) {
            content.css('height','75px').css('overflow','hidden');
            content.after('<div class="text_readmore">read more</div>');
        }
    });
});

$(document).on('click', '.text_readmore', function() { // event delegation
    $(this).closest('.text_content').css('height','').css('overflow','');
});

如果您使用的是1.7之前的jQuery版本（即添加.on时间），请改用.delegate ：

$(document).delegate('.text_readmore', 'click', function() { // event delegation
    $(this).closest('.text_content').css('height','').css('overflow','');
});