Question

我正在使用jsp生成一个页面，它有一个列表元素，显示一些报告名称。在生成列表时，我想隐藏列表项元素中每个报表的id，这样当用户点击该项时，我可以使用ajax从服务器获取它，因为我知道id。有什么好方法可以让jquery轻松获取点击内容？现在我有类似的东西：

// jsp pseudocode
<ul id='reports'>
    <%
    for (all reports) {
        %><li><%= report.getTitle() %>
            <div class='hidden'><%= report.getId() %></div> // the hidden id for this item
          </li>
        <%
    }
</ul>

// click handler for the list.
$('#reports').delegate('li', 'click', function() {
    var idOfTheClickedReport = ?;
    fetchReportById(idOfTheClickedReport);
    ...
});

有更好的方法吗？

谢谢

Answer 1

你所做的事情是完全合理的。

另一种方法是使用jQuery的data()调用来存储元素上的任意数据。

Answer 2

您可以将id存储为像

这样的任意html属性

<li reportid='<%= report.getId() %>'><%= report.getTitle() %></li>

会工作，然后你就可以获得id了 var idOfTheClickedReport = $（this）.attr（'reportid'）;

它不是标准兼容的HTML，但它应该可以在任何浏览器中正常工作。

Answer 3

HTML5 way to do it将数据存储在名称以data-开头的元素属性中，如下所示：

<li data-reportid='<%= report.getId() %>'><%= report.getTitle() %></li>

Answer 4

我建议不要使用隐藏的div。 id有很多额外标记，您目前没有使用id或rel属性（两个潜在候选人都可以保留此信息）：

由于HTML中已存在ID的概念，我认为利用它最有意义：

<ul id='reports'>
   <% for (all reports) { %>
      <li id="report-<%= report.getId() %>"><%= report.getTitle() %></li>
   <% } %>
</ul>

这将输出：

<ul id='reports'>
      <li id="report-1">Title Here</li>
      <li id="report-19">Title Here</li>
      <li id="report-27">Title Here</li> 
</ul>

然后在你的jQuery部分（假设id将不包含-）：

$('#reports').delegate('li', 'click', function() {
    var idOfTheClickedReport = this.id.split('-').pop();
    fetchReportById(idOfTheClickedReport);
    ...
});

在<li>中隐藏一些可以在点击期间提取的信息的好方法吗？</li>

4 个答案: