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

Question

我尝试编码的是以下内容：

1. 查找给定班级的每个div
2. 如果其中一个碰巧高于我的最大值，请将其设为75px并隐藏溢出，并在此特定超大元素后添加“阅读更多链接”。
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

您在content处理程序中使用.click变量，这并不是您想要的。您还可以重构代码，以便为所有此类.click链接定义一次text_readmore处理程序，以提高效率。

尝试这样的事情：

$(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','');
});