javascript - 阅读更多脚本和并排 div 无法正常协同工作

Question

关注this post之后关于如何为文本部分设置“阅读更多”，以及 this post要设置两个并排的 div，我遇到了一个问题，即左侧 float 的 div 工作正常 - 单击“阅读更多”会显示 div 中的其余文本，反之亦然“阅读更少”。但是，第二个 div 没有按预期工作 - 单击“阅读更多”会隐藏第二个 div 的文本，同时还会更改第一个 div 的省略号。

为了更清楚:

//Script for Read More/Read Less
<script>
    $(document).ready(function() {
        var showChar = 200;
        var ellipsestext = "...";
        var moretext = "Read More";
        var lesstext = "Read Less";
        $('.more').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(".moreelipses").toggle();
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
</script>

<style>
    .comment {
        width: 100%;
        margin: 0 auto;
    }
    a.morelink {
        outline: none;
        color: #5bc0de !important;
    }
    .morecontent span {
        display: none;

    }
</style>

//First Div
<div class="container" style="width:620px; float:left;">
    <div class="row">
        <div class="comment more col-lg-8 col-lg-offset-2 text-center">
            <p class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>
</div>
//Second Div
<div class="container" style="width:620px; float:right;">
    <div class="row">
        <div class="comment more col-lg-8 col-lg-offset-2 text-center">
            <p class="comment more">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div style="clear:both">
</div>

结果:

• 如果两个 div 都没有展开，则两者都显示正常。
• 如果 div 1 已扩展而 div 2 未扩展，则 div 1 的文本会按预期扩展。第 2 部分保持不变。
• 如果 div 2 展开而 div 1 未展开，则 div 2 的文本保持收缩状态。两个 div 的省略号 (...) 都消失了。
• 如果两个 div 都展开，则 div 1 的文本按预期展开，div 2 的文本保持收缩。 Div 1 仍然显示它的省略号，虽然它不是故意的。

Answer 1

您只需要整理一下代码...

这是 fiddle :https://jsfiddle.net/bgssveqq/5/

部分 JS:

$(".morelink").on("click", function() {
          if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            }
            else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().parent().children("p").children(".moreelipses").toggle();
            $(this).parent().parent().children("p").children(".morecontent").toggle();
        });