制作按钮来更改它在

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') 
} 

编辑：我现在意识到我发布的代码应该工作（我发布之前简化它），问题是，因为它是从一个不同的功能指引$（本）。这才是真正的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'); 
}