javascript - 动态创建的 "read more"链接展开了所有内容，而不仅仅是一个内容

Question

我尝试编写的代码如下:

1. 查找给定类的每个 div
2. 如果其中一个恰好高于我的最大值，请将其设置为 75 像素高并 overflow hidden ，并在这个特定的超大元素后面添加一个“阅读更多链接”。
3. 使链接有效...

我成功了。 2. 但是，点击链接后，所有 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','');
});