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

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

聚苯乙烯。您可以链接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");
}

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

2 个答案: