使用javascript函数正确获取data-url

Question

我正在创建一个删除评论功能，这是一个删除评论功能的html片段。

<div id="comment-area">
  <div class="list-border">
    <small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/12/6">
      x
    </small>
  </div>
  <div class="list-border">
    <small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/13/6">
      x
    </small>
  </div>
</div>

这是删除评论的函数，在文档准备就绪时自动加载。

function delete_comment () {
  $('.delete-comment').click( function (e) {
    var url = $('.delete-comment').attr('data-url');
    $.ajax({
      url: url,
      type: 'get',
      dataType: 'json',
      success: function (data) {
        $('#comment-area').html(data.comments);
        delete_comment();
      },
      error: function () {
        alert('error');
      }
    });
  });
}

这个函数的问题来自上面给定的html，如果我要用data-url="http://myproject.com/comment_controller/delete_comment/13/6"单击.delete-comment，请注意这一行中的"13/6"，即javascript函数delete_comment()

var url = $('.delete-comment').attr('data-url');

我选择让data-url="http://myproject.com/comment_controller/delete_comment/12/6"也记下这个"12/6"，以查看不同之处，而不是我单击的.delete-comment的data-url。

简而言之，这个函数总是选择first-child div small，无论我要单击什么small.delete-comment。

对此最好的解决方案是什么？

Answer 1

试一试

var url = $(this).attr('data-url');

您将通过className获取attribue value，而multiple elements具有相同的class，因此将返回在first element中找到的dom的attribute value。

所以你需要获取element的value，也就是clicked，你可以使用this来获取点击的element的value。

Answer 2

一种更健壮的方法是使用jQuery .data()函数。

var url = $(this).data('url');

这将拾取任何动态添加/更新的url，这些url可能已通过JavaScript更改，但未在DOM属性中更新。