切换选定的表格行突出显示按钮单击

Question

我有一个简单的表，每行都有一个Select按钮，当单击它时调用PHP脚本来更新具有所选Item的ID的会话变量。 这是表格：

 <tr class="" id="PR9215"> <td>CODE A</td> <td>Fresh Frust</td> <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td> </tr> <tr class="" id="PR9594"> <td>Oranges</td> <td>Fresh Oranges</td> <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td> </tr> <tr class="" id="PR9588"> <td>MANGO</td> <td>Fresh Mango</td> <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td> </tr> 

这是它调用的脚本：

 $(document).ready(function() { $('button.btn-success').click(function() { var itemID = $(this).closest('tr').attr('id'); // Create a reference to $(this) here: $this = $(this); $.post('updateSelections.php', { itemID: itemID, selectionType: 'yes' }, function(data) { data = JSON.parse(data); if (data.error) { var ajaxError = (data.text); var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact Support'; $this.closest('tr').addClass("warning"); $('#alert_ajax_error').html(errorAlert); $("#alert_ajax_error").show(); return; // stop executing this function any further } else { console.log('update successful - success add class to table row'); $this.closest('tr').addClass("success"); $this.closest('tr').removeClass("danger"); //$(this).closest('tr').attr('class','success'); } }).fail(function(xhr) { var httpStatus = (xhr.status); var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Support'; console.log('ajaxError: ' + ajaxError); $this.closest('tr').addClass("warning"); $('#alert_ajax_error').html(ajaxError); $("#alert_ajax_error").show(); }); }); }); 

这在初始选择时起作用 - 表格行显示为绿色以表示已选择。 我现在需要对此进行扩展，以便在第二次单击“选择”按钮时，它将删除绿色表格行突出显示并将其返回到其原始状态。

现在确定如何扩展脚本来实现这一目标。

Answer 1

你可以通过使用布尔来跟踪按钮的状态来实现这一点。 然后在采取行动之前检查按钮的状态。

PS。 您可以链接addClass（）和removeClass（）方法。

var buttonSelected = false;

if(buttonSelected){
    $this.closest('tr').addClass("success").removeClass("danger");
    buttonSelected = true;
} else {
    $this.closest('tr').removeClass("success").addClass("danger");
    buttonSelected = false;
}

Answer 2

检查以下逻辑：

$('button.btn-success').click(function() {
if ($this.closest('tr').hasClass("first_click")) {
  $this.closest('tr').removeClass();
//$( "tr" ).removeClass();
return false;
}else{
$this.closest('tr').addClass("first_click");
}