0

我在 Code Igniter Framework 中运行的 smarty 模板中有一段代码，显示用户评分和评论。由于 foreach() 循环，所有的评论 div 会立即加载。我想要一个 JQuery 在页面加载时加载 5 个结果，然后在页面底部有一个按钮，每次按下时我可以再加载 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 }}
4

1 回答 1

0

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

还要注意，您必须同步 ajax 调用。最简单但无效的方法是将选项 async: false 添加到 .ajax 调用。否则，如果您多次单击更多按钮，项目可能会出现故障。

于 2013-05-27T20:13:38.410 回答