0

当我想折叠整个 div 时，readmore.js 可以很好地工作。我需要弄清楚如何将 readmore 插件与动态创建的 div 一起使用，这样我就可以只折叠需要它的表格部分。

我从数据库返回未知数量的行并将它们放在一个表中。这些字段是日期、联系人姓名和评论。评论字段可能很长，所以我想在每条评论上使用 .readmore() 。

我目前正在做的是为评论字段动态创建一个 div。这个想法是将该 div id 与 .readmore() 一起使用

我的循环看起来像这样：

// NoteTable is html file's div that will display all the returned data
// jquery append method is used to add a table and children rows:
$('#NoteTable').append('<table></table>'); 
var table = $('#NoteTable').children();
table.append('<tr><td colspan="2" class="sec-hd2">Discharge Planning Notes</td></tr>');

// Loop thru the returned data in the json object:
for (var i = 0; i < jsonNote.DATAREC.LIST.length; i++) {

  // Add a row for date info:
  table.append('<tr><td><b>Date:</b></td><td>' + jsonNote.DATAREC.LIST[i].COMMENT_DT + '</td></tr>');

  // Add a row for contact name info:
  table.append('<tr><td><b>Personnel:</b></td><td>' + jsonNote.DATAREC.LIST[i].COMMENT_PRSNL + '</td></tr>');

  // use the loop# to create a unique ID for a new div tag:
  var tempID = 'comment' + i
  //alert (tempID)

  // Add a row for the comments with a div tag around the comment string:
  table.append('<tr><td colspan="2"><div id="' + tempID + '">' + jsonNote.DATAREC.LIST[i].COMMENT + '</div><br />&nbsp;</td></tr>');

  // Use the readmore plugin on this new div:
  //table.append('$(#' + tempID + ').readmore()');
  // QUESTIONS/PROBLEMS WITH PREVIOUS LINE OF CODE:
  //  1) I'm not sure if I need to append it to the table like I do everything else
  //     (I don't get errors using tempID.readmore without the table.append but it doesn't work either
  //  2) I'm not sure how to do the quote marks/pound sign/dollar sign when I build this string

}

无论我如何配置最后一行代码，我都没有在任何评论上“阅读更多”。我不确定语法应该是什么。欣赏任何想法。如果这样会更好，我愿意完全修改它。

更多信息：阅读更多

4

1 回答 1

2

由于 Readmore.js 是一个 jQuery 插件，它可以采用一个返回元素数组的选择器。因此，我建议将类而不是 id 添加到动态生成的 div 中，然后使用该类来初始化 Readmore.js：

// Add a row for the comments with a div tag around the comment string:
table.append('<tr><td colspan="2"><div class="long-text">' + jsonNote.DATAREC.LIST[i].COMMENT + '</div><br />&nbsp;</td></tr>');

然后，在您的循环之外，在您构建表并将其附加到 DOM 之后：

$('.long-text').readmore();

那应该这样做。

于 2013-10-17T22:42:06.990 回答