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功能。给它选择器，它将尝试找到最接近的选择器并返回该元素。

<强>父母

$('.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');
}

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

1 个答案: