javascript - 在表格单元格中创建按钮以更改其所在行的颜色

Question

我试图将一个类添加到我单击的按钮所在的同一行。我使用 jquery“最接近”函数，但它不起作用。我也尝试过 .parent 等。有人知道我做错了什么吗？

<table class="table table-striped table-bordered table-hover">
<tbody class="">
    <tr class=''> //I want to change this class
        <td style=''><div class='btn btn-xs btn-success cellButton'></td>
    </tr>
</tbody>

$('.cellButton').on('click', function(){
    $(this).closest("tr").addClass('info')
}

编辑:我现在意识到我发布的代码应该可以工作(我在发布之前简化了它)，问题是因为它从不同的函数引用 $(this) 。这是真正的 JavaScript 函数:

$('.cellButton').on('click', function(){


var formData = {
  'action': 'blabla',
  'ID': ID,
};

$.ajax({
      type: 'POST',
      url: 'includes/jquery-actions.php',
      data: formData,
      dataType: 'json',
          error: function (response) {
              alert("error!");
          },
          success: function (response) {
                  var row =  $(this).parents("tr"); //$(this) here not referencing the HTML button?)
                      row.addClass('warning');
          }
    })

}

Answer 1

您的版本正在运行。还 您可以使用jQuery#parents功能。给它选择器，它会尝试找到最接近的选择器并返回该元素。

parent

$('.cellButton').on('click', function() {
    $(this).parents("tr").addClass('info');
});

.info {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<tbody class="">
    <tr class=''> 
        <td style=''><div class='btn btn-xs btn-success cellButton'>Click me</td>
    </tr>
</tbody>

最近

$('.cellButton').on('click', function() {
    $(this).closest("tr").addClass('info');
});

.info {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover">
<tbody class="">
    <tr class=''> 
        <td style=''><div class='btn btn-xs btn-success cellButton'>Click me</td>
    </tr>
</tbody>

已更新

上下文存在问题。

您可以将 this 保留在 ajax 请求之上，并在 function 中使用该变量

var that = this;

...

success: function (response) {
      var row =  $(that).parents("tr"); 
      row.addClass('warning');
}

或者只使用箭头函数

success: (response) => {
      var row =  $(this).parents("tr"); 
      row.addClass('warning');
}