javascript - 使用javascript函数正确获取数据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');
      }
    });
  });
}

如果我要单击 .delete-comment ，则上面给定的 html 中的此函数存在问题data-url="http://myproject.com/comment_controller/delete_comment/13/6"注意这个"13/6"，javascript函数删除评论(),在这一行

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 所以 正在返回在 dom 中找到的 第一个元素 的属性值。

所以你需要获取被点击的element的value，你可以使用this获取单击的元素的值。