Question

我正在尝试使用下划线的模板功能为我的HTML生成动态内容。代码如下：

<div id="accordeonExaminadorBaliza" data-role="collapsible" data-theme="b" data-content-theme="b">
  <legend>Examinador de Baliza</legend>
  <ul id="listExaminadorBaliza" data-role="listview" data-inset="true">
    <%  _.each(c.getExaminadores(), function(examinador){ %>
      <li><img width = '80' height = '80' src= "data:image/jpeg;base64,<%= examinador.fotografia %>"> <%= examinador.nome %></li>
    <%  }); %>
  </ul>
</div>

现在，我需要捕捉有关＆＃39; li＆＃39;用户点击它的元素。如何实现一个事件监听器，点击后可以捕获对象＆＃39; examinador＆＃39;当前＆＃39; li＆＃39;元件？我对javascript没有多少经验，所以请耐心等待。

Answer 1

模板引擎使用标识符examinador.nome;在模板引擎写出文本后，页面上运行的脚本无法访问它。相反，您可以让模板代码在元素上写出data-属性字符串所需的任何数据（使用-输出HTML转义值）：

<%  _.each(c.getExaminadores(), function(examinador){ %>
  <li data-nome="<%- examinador.nome %>"><img width='80' height='80' src="data:image/jpeg;base64,<%= examinador.fotografia %>"><%- examinador.nome %></li>
<%  }); %>

然后使用jQuery的.data：

访问它

$('#listExaminadorBaliza').on('click', 'li', function(){
    alert($(this).data("nome"));
    // or
    alert($(this).attr("data-nome"));
});

Answer 2

你可以这样做：

<li data-id="<%= examinador.id %>" onClick="alert(event.currentTarget.getAttribute('data-id'))"><img width = '80' ...

您可以在onClick中添加更复杂的功能，这只是一个示例

Here's an example

_.each的回调函数？

2 个答案: