javascript - 如何添加显示/隐藏评论链接不适用于 underscore.js

Question

更新 - 为了帮助解释这一点，我创建了一个 fiddle ，可以在这里找到 http://jsfiddle.net/Dano007/b11xarpp/5/

概述。

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

我在这里找到了这个示例 JS 代码，它看起来很完美。 http://jsfiddle.net/xn6Sp/9/

问题。

我正在使用 underscore.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);

}); 

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

赏金适用于: 1 - 使用此 jfiddle 中显示的代码使阅读更多/折叠链接正常工作。 http://jsfiddle.net/Dano007/kgybcuqq/1/

Answer 1

我发现了问题。

myBadgeQuery.find 是异步方法，成功函数仅在从服务器(本例中为 parse.com)检索数据后调用。

所以理想情况下，折叠逻辑应该在将数据追加到 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);
  }
});

折叠代码:

   //////////////////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');
        }

      });
    }

  });   
};

更新了 fiddle ..应该适合你。 http://jsfiddle.net/rahulrulez/kgybcuqq/3/

摆弄单独的可折叠链接:http://jsfiddle.net/rahulrulez/kgybcuqq/4/