切換選定的表格行突出顯示按鈕單擊

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");
}