Javascript 如何添加不使用下划线.js的显示/隐藏注释链接

更新-为了帮助解释这一点，我创建了一把小提琴，可以在这里找到

概述

我想在我的评论中添加一个“阅读更多/折叠”链接，如果超过一定大小，评论的可见性将受到限制，用户将单击“阅读更多”查看它们

我在这里发现了这个JS代码示例，它看起来很完美

问题

我使用下划线.js.each包装器在页面上显示我的评论，如下所示

_.each(Badges, function (item) {
  var wrapper = $('<div></div>');

  wrapper.append('<div id="comments"  class="item"></div>' + ' Reason: ' + item.comment + '</div>' + '<br>');

  $('#container').append(wrapper);

}); 

\每个（徽章、功能（项目）{
var包装器=$（''）；
append（'+'原因：'+item.comment+'+'
'）；
$（'#container'）。追加（包装器）；
}); 

然而，使用它似乎会产生以下问题。 1-读取更多链接未正确附加 2-看起来JS读取的div内容是空的，因此无法工作

赏金用于： 1-使read more/collpase链接与此JFIDLE中显示的代码正确工作。 试试看

$(function () {

    var Badges = {
        "comment" : ["stuff", "stuff", "stuff", "stuff"
                    , "stuff", "stuff the end"]
    };
    $.each(Badges.comment, function (key, value) {

      $("#container").append('<br /><span id=comment-'+key+'>' 
                 + ' Reason: ' + value + '</span>');

    });

    var collapsedSize = '50px';
    $('.item').each(function () {
        var h = this.scrollHeight;
        var div = $(".item");
        if (h > 30) {
            div.css('height', collapsedSize);

            div.after('<a id="more" href="#"'
                      + 'style="display:block;'
                      + 'position:relative;margin-top:4px;">'
                      + 'Read more'
                      + '</a><br/>');
            $("#container *:gt(3)").filter(function (i, el) {
                return $(el).offset().top > $("#more").offset().top
            }).hide();
            var link = div.next();
            link.click(function (e) {
                e.stopPropagation();
                link.text(function (i, o) {
                    return o === "Read more" ? "Collapse" : "Read more";
                });
                if (link.text() === 'Collapse') {
                    div.animate({
                        'height': h
                    });
                    $(".item *").show();
                } else {
                    div.animate({
                        'height': collapsedSize,
                    });
                    $(".item *:gt(3)").hide();
                }
            });
        }
    });

})

$（函数（）{
var徽章={
“评论”：[“东西”、“东西”、“东西”、“东西”
，“填充”，“填充结尾”]
};
$。每个（徽章、注释、功能（键、值）{
$（“#容器”）.append（“
”
+'原因：'+value+''；
});
var collapsedSize='50px'；
$（'.item'）。每个（函数（）{
var h=此高度；
var div=$（“.item”）；
如果（h>30）{
div.css（“高度”，折叠尺寸）；
在（“
”）之后划分；
$（“#容器*：gt（3）”）。过滤器（函数（i，el）{
返回$（el）.offset（）.top>$（“#更多”）.offset（）.top
}).hide（）；
var link=div.next（）；
链接。单击（功能（e）{
e、 停止传播（）；
link.text（函数（i，o）{
返回o==“读取更多”？“折叠”：“读取更多”；
});
如果（link.text（）==='Collapse'）{
动画师({
“高度”：h
});
$（“.item*”）.show（）；
}否则{
动画师({
“高度”：折叠尺寸，
});
$（“.item*：gt（3）”）.hide（）；
}
});
}
});
})

我发现了这个问题

myBadgeQuery.find

是一种异步方法，只有在从服务器检索到数据后（在本例中为parse.com），才会调用success函数

因此，理想情况下，折叠逻辑应该在将数据附加到DOM中后执行

我创建了一个名为

collapseIt

的函数，将所有的折叠逻辑封装在其中，并在

myBadgeQuery.find的
success
中调用它

myBadgeQuery.find({
  success: function (Badgeresults) {

    var Badges = [];
    for (var i = 0; i < Badgeresults.length; i++) {
      Badges.push({
        comment: Badgeresults[i].get('Comment'),


      });

    }

    _.each(Badges, function (item) {
        console.log("Got the data");
      var wrapper = $('<div></div>');

      wrapper.append('<div id="comments"  class="item"></div>' + ' Reason: ' + item.comment + '</div>' + '<br>');

      $('#container').append(wrapper);


    });                            

    //Invoke collapse code after you append the data. This is async function so you have to wait till data is appended.
    collapseIt();


  },
  error: function (error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

myBadgeQuery.find({
成功：功能（结果）{
var徽章=[]；
对于（var i=0；i'）；
$（'#container'）。追加（包装器）；
});                            
//在追加数据后调用折叠代码。这是一个异步函数，所以必须等到追加数据。
collapseIt（）；
},
错误：函数（错误）{
警报（“错误：+Error.code+”“+Error.message”）；
}
});

折叠代码：

   //////////////////Hide/show comments on code//////////////
var collapseIt = function(){
     var collapsedSize = '20px';
   $('.item').each(function() {
    console.log("inside each");       
    var h = this.scrollHeight;

    console.log(h);
    var div = $(this);
    if (h > 30) {
      div.css('height', collapsedSize);
      div.after('<a id="more" class="item" href="#">Read more</a><br/>');
      var link = div.next();
      link.click(function(e) {
        e.stopPropagation();

        if (link.text() != 'Collapse') {
          link.text('Collapse');
          div.animate({
            'height': h
          });

        } else {
          div.animate({
            'height': collapsedSize
          });
          link.text('Read more');
        }

      });
    }

  });   
};

//隐藏/显示对代码的注释//////////////
var collapseIt=函数（）{
var collapsedSize='20px'；
$（'.item'）。每个（函数（）{
控制台日志（“每个内部”）；
var h=此高度；
控制台日志（h）；
var div=$（本）；
如果（h>30）{
div.css（“高度”，折叠尺寸）；
在（“
”）之后划分；
var link=div.next（）；
链接。单击（功能（e）{
e、 停止传播（）；
如果（link.text（）！='Collapse'）{
link.text（'Collapse'）；
动画师({
“高度”：h
});
}否则{
动画师({
“高度”：折叠尺寸
});
link.text（“阅读更多”）；
}
});
}
});   
};

更新的小提琴。。应该对你有用

处理单个可折叠链接：
这似乎是一个很好的答案，但我无法让它与我的代码一起工作，因为我的代码实际上填充了数据库中的注释。不确定您想帮助了解这一点到什么程度？@Dano007如果可能，可以在制作作品中描述作品后期效果/问题的细节；分叉/调整JSFIDLE以说明问题；发布/描述如何从db、other
html
或当前OP中可能未包含的部分填充注释部分？您的示例只有两个对象，对吗？我们如何才能产生更多的结果？有什么想法吗？@RahulPatil我已经添加了更多的对象，如果你重新运行小提琴，你至少会看到5个。这有用吗？检查答案。我尽可能多地解释这些事情。如果您需要任何进一步的帮助，请发表评论。@Ruhul Paril，在右边的几行，我唯一的评论是，它将5db注释视为一个对象，而不是5。这些注释可能出现在不同的位置，并且没有连接。是否可以更改为有5个“阅读更多/折叠”选项，每个注释一个？许多的thanks@Dano007这把小提琴应该对你有帮助。。如果你需要，我可以解释：-）它看起来很完美，谢谢！只要赏金允许我就马上给他！非常感谢我帮助的小伙子：-）谢谢！