按钮状态不会改变答案

【问题标题】：Button states wont change按钮状态不会改变
【发布时间】：2018-07-17 04:18:44
【问题描述】：

我正在尝试使用 jquery 和 bootstrap 更改按钮的状态。在我单击一个后，它们都只是保持 btn 默认值。

$("#content-background-disabled-btn").click((e) => {
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-enabled-btn").removeClass("btn-success");
  $("#content-background-enabled-btn").addClass("btn-default");

  e.preventDefault();
});
$("#content-background-enabled-btn").click((e) => {
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-disabled-btn").removeClass("btn-success");
  $("#content-background-disabled-btn").addClass("btn-default");

  e.preventDefault();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
<button class="btn btn-default" id="content-background-disabled-btn">
content-background-disabled-btn
</button>
</p>

<p>
<button class="btn btn-default" id="content-background-enabled-btn">
content-background-enabled-btn
</button>
</p>

【问题讨论】：

How to access the correct `this` inside a callback?的可能重复
问题是由于您使用了箭头函数。函数中的this 指的是父this 绑定，即window。

标签： jquery twitter-bootstrap

【解决方案1】：

您可以使用this 在按钮中的类的状态之间添加/删除。

$('#content-background-disabled-btn').click(function() {
    $(this).removeClass('btn-default');
    $(this).addClass('btn-success');
});

【讨论】：

这似乎与 OP 想要的相反。单击按钮不应切换状态，而应仅将其设置为btn-success

【解决方案2】：

试试这个，兄弟

$("#content-background-disabled-btn").click(function(e) {
e.preventDefault();
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-enabled-btn").removeClass("btn-success");
  $("#content-background-enabled-btn").addClass("btn-default");

   
});
$("#content-background-enabled-btn").click(function(e) {
  $(this).removeClass("btn-default");
  $(this).addClass("btn-success");

  $("#content-background-disabled-btn").removeClass("btn-success");
  $("#content-background-disabled-btn").addClass("btn-default");
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
<button class="btn btn-default" id="content-background-disabled-btn">
content-background-disabled-btn
</button>
</p>

<p>
<button class="btn btn-default" id="content-background-enabled-btn">
content-background-enabled-btn
</button>
</p>

【讨论】：