Question

我在Code Igniter Framework中运行的智能模板中有一段代码，显示用户评分和评论。由于foreach（）循环，所有注释div都会立即加载。我希望有一个JQuery在页面加载时加载5个结果，然后在页面的botoom上有一个按钮，我可以在每次按下时再加载5个。有人可以帮帮我吗？

{{ if ($comments_count > 0): }}
{{ foreach ($comments as $index=>$comment): }}
  <div class="notepad">
    <div class="notepad-heading">
    <span class="evaluation_comment_date">{{= timespan(strtotime($comment-    >date_time_added),now()).' '.lang('evaluation_ago') }}
    </div>
<table width="750" border="0" align="left">

<tr>
<td width="154"  valign="top"><h6 style="display:inline">{{= lang('comment_rating') }}</h6></td>
<td width="83"><img style="display:inline" src="{{= template_path() . 'images/' . $comment->rating_image }}" alt=""/></td>
<td width="38" rowspan="5">&nbsp;</td>
<td width="307" colspan="5" rowspan="5" valign="top">&#8220;{{= $comment->quotation       }}&#8221;</td>
  </tr>
  <tr>
    <td valign="top"><h6 style="display:inline">{{= lang('comment_rating2') }}</h6>    </td>
    <td valign="top"><img style="display:inline" src="{{= template_path() . 'images/' .     $comment->rating_image2 }}" alt=""/></td>
  </tr>
  <tr>
    <td valign="top"><h6 style="display:inline">{{= lang('comment_rating3') }}</h6>   </td>
<td valign="top"><img style="display:inline" src="{{= template_path() . 'images/' . $comment->rating_image3 }}" alt=""/></td>
  </tr>
  <tr>
    <td valign="top"><h6 style="display:inline">{{= lang('comment_rating4') }}</h6>    </td>
    <td valign="top"><img style="display:inline" src="{{= template_path() . 'images/' .     $comment->rating_image4 }}" alt=""/></td>
  </tr>
  <tr>
    <td valign="top"><h6 style="display:inline">{{= lang('comment_rating5') }}</h6>   </td>
    <td valign="top"><img style="display:inline" src="{{= template_path() . 'images/' .     $comment->rating_image5 }}" alt=""/></td>
    </tr>
</table>
  </div>
{{ if ($index+1 != count($comments)): }}<div class="list_separator"></div>{{ endif }}
{{ endforeach }}
{{ else: }}
<h3>{{= lang('evaluation_no_comments') }}</h3>
{{ endif }}

Answer 1

最简单的解决方案是只需添加display：none来隐藏元素，然后在用户单击按钮时显示它们。如果您有很多项目，那么每次用户点击更多按钮时，您都必须使用.ajax调用来获取元素。编写一个将在js中使用.ajax调用的脚本。脚本将重新调整新元素（如果使用SQL查看LIMIT x，y：x - from，y - 元素数）。然后在.ajax回调中，只需将新元素追加到dom（html）。

另外需要注意的是，您必须同步ajax调用。最简单但不有效的方法是向.ajax调用添加选项async：false。否则，如果您多次单击更多按钮，则项目可能会出现故障。

在Smarty模板上加载更多JQuery

1 个答案: