Question

我的问题与“ jQuery - Collapser插件”（http://www.aakashweb.com/jquery-plugins/collapser/）有关： -

我使用以下脚本隐藏或显示DIV中的内容，CLASS名称为“shrink”。它工作正常。

<script type="text/javascript">
$(document).ready(function() {
    $('.shrink').collapser({
        mode: 'words',
        truncate: 80,
        ellipsis: ' ... '
    });
});
</script>

但是，在BODY中，我使用javascript在DIV中打印一些内容，并使用表来隐藏或显示<tr><td><div class="shrink"></div></td></tr>内的内容。现在，隐藏或显示内容不起作用。（示例脚本如下所示，注意：没有换行符。仅供参考。）

<script type="text/javascript">
var dataTable = document.getElementById('Result');
var content = "<table class='tablesorter'>
<thead>
  <tr>
    <th>ID</th>
    <th>Title</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>123</td>
    <td><div class='shrink'>Some long content....</div></td>
  </tr>
</tbody>
</table>";
dataTable.innerHTML = content;
</script>

<div id="Result"></div>

另外，我尝试了一个简单的声明，如下所示。它不起作用。

var content = "<div class='shrink'>Some long content....</div>";

Answer 1

你必须小心javascript字符串中的换行符。请注意语法突出显示如何在第二行停止。你必须逃脱它们或连接它们。

逸出..

var content = "<table class='tablesorter'>\
<thead>\
  <tr>\
  ....
</table>";

请注意，如果您逃避换行符，则\后面不能有任何尾随空格。

concatting ..

var content = "<table class='tablesorter'>"+
"<thead>"+
  "<tr>"+
  ....
"</table>";

Answer 2

<script type="text/javascript">
function shrink() {
  $('.shrink').collapser({
    mode: 'words',
    truncate: 80,
    ellipsis: ' ... '
  });
}
function display () {
  var dataTable = document.getElementById('Result');
  var content = "<table class='tablesorter'>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>123</td>
      <td><div class='shrink'>Some long content....</div></td>
    </tr>
  </tbody>
  </table>";
  dataTable.innerHTML = content;
}
setTimeout(function(){ display(); shrink(); }, 1000);
</script>

<div id="Result"></div>

jQuery Collapser隐藏或显示DIV内的内容

2 个答案: