Question

当我想要折叠整个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

}

无论我如何配置最后一行代码，我都没有对任何评论进行“阅读更多”。我不确定语法应该是什么。欣赏任何想法。如果情况好一点，我愿意彻底改变它。

更多信息：readmore

Answer 1

由于Readmore.js是一个jQuery插件，它可以使用一个返回元素数组的选择器。所以，我建议的是向动态生成的div添加一个类而不是id，然后使用该类初始化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();

应该这样做。

将readmore.js插件与动态创建的div标签一起使用

1 个答案: