Question

所以我更喜欢使用不引人注目的javascript来内联javascript。我觉得使用起来要容易得多。

我一直遇到的问题是，我不知道如何获取我想要使用的每个特定元素的数据。

例如：

我有一个列表，我生成以下HTML（这里是伪代码）

<%for e in list%>
    <a href="#" class="delete"><%=e%></a> <!-- <%= e.id %> ??-->
<%end%>

所以我想将javascript附加到其中的每一个＆lt; a＆gt;将调用ajax帖子的标签，但我需要“id”从后端删除正确的元素。

$('a.delete').click(function() {
    // Ajax request using "e.id"
});

我尝试过的一些事情：

构建href并使用attr方法将ajax请求发送到该URL。（对于POST请求，我真的不喜欢这个，但它确实有效。
使用rel属性存储我需要的数据。
使用HTML5 data属性。（我不知道所有浏览器的可用性，因为我们需要支持IE6 +我不喜欢这个想法。）
为每个＆lt; a＆gt;创建一个表单。标记和序列化。（这似乎是很多额外的代码，但它看起来也很干净。）

实现这一目标的最佳做法是什么？

Answer 1

我经常将这种数据存储在标签中，如下所示：

属性标记方法

   <div id="list">
      <a href="/link" post_id="68">Some post</a>
   </div>

然后在jQuery中做类似的事情：

 $('#list').delegate('a.delete', 'click', function(event) {
     event.preventDefault(); // Stop default click event

     // ajax stuff here
     // $(this).attr('post_id') = 68
 });

更新： .attr('post_id')在IE6中不起作用。

替代方法？嗯...

所有这些都使用上面的委托功能。

在专用元素中，使用class或id来定义元素数据：

   <div id="list">
    <a href="/link"><span class="hide post_id">66</span>Some post</a>
   </div>

访问方式： $('span.post_id', this).text()

可能只是简单ID的恶意之一，但如果你需要存储复杂的数据，那么在元素中添加它可能是一种选择。

在href ...

   <div id="list">
      <a href="/link/66">Some post</a>
   </div>

访问方式： $(this).attr('href').match(/\/([0-9]+)$/)[1]

此方法显然取决于您的网址。这是最不显眼的方法之一，假设您的网址结构不太复杂或经常更改。

这是一个ID。这是独一无二的。我们的ID：

   <div id="list">
      <a href="/link" id="post_66">Some post</a>
   </div>

访问方式： $(this).attr('id').split('_')[1]

此方法的好处是您还可以根据特定ID设置元素样式 - 有时很有用。它也是最有意义的。您的ID是唯一的。该锚链接与该帖子相关，即该唯一ID，因此使用id属性是有意义的。

Answer 2

使用id属性存储带有id的字符串，如下所示：

<%for e in list%>     
    <a id="link_<%= e.id %>" href="#" class="delete"><%=e%></a> 
<%end%>

通过拆分下划线来读取id：

$('#list a').click(function(){
    //old var id = $(this).attr('id').split('_')[1];
    var id = this.id.split('_')[1]; //thx @mu

    $.ajax({
        url: 'http://www.someurl.com/delete.aspx?id=' + id,
        //...more
    })
});

Answer 3

您可以为每个<a>元素添加ID，如<a href=".." id="delete_<%e.id%>" >，然后当您将事件附加到此链接时，您可以通过字符串indexOf找到ID并使用相关的ajax函数。

Answer 4

已经有一段时间了，我找到了解决方案，我很满意。它可能不完美，但这是我迄今为止找到的最好的选择。

公平地说，所有这些答案都是正确的 - 它们会正常工作。在这一点上，这只是一个美学问题，而YMMV。

所以，在相同的模板伪代码中：

<% for e in list %>
  <a href="#" class="delete"
     data-method="delete"
     data-url="<%= delete_url(e.id) %>"><%= e %></a>
<% end %>

一些jQuery会做我想做的事情：

$('a.delete').on('click', function(e) {
  var self = $(this);
  var method = self.data('method');
  var url = self.data('url');

  $.ajax({
    url: url,
    type: method
  }).done(function() {
    alert('woot - success');
  });
});

我认为data元素是了解如何与Web服务交互的最佳方式。这允许我们使用我们将在视图渲染中使用的相同url助手。

Ajax在元素列表上使用不显眼的javascript请求

4 个答案:

属性标记方法

替代方法？嗯...

在专用元素中，使用class或id来定义元素数据：

在href ...

这是一个ID。这是独一无二的。我们的ID：