javascript - 多次点击jquery后更改多个按钮的颜色

Question

点击后如何更改按钮颜色。我有一个按钮，第一次点击它会变成红色，第二次点击它会变成黄色，第三次它会变成绿色，点击三次后它将被禁用。

function apiBtn() {
  $('.btn-api').click(function() {
    var $this = $(this),
      $clickCounts = 1;
    if ($clickCounts === 1) {
      $this.addClass('bg-act-red');
      $clickCounts += 1;
    } else if ($clickCounts == 2) {
      $this.addClass('bg-act-yellow');
      $clickCounts += 1;
    } else if ($clickCounts == 3) {
      $this.addClass('bg-act-green');
      $clickCounts += 1;
    }
  });
}

.btn-api {
  display: block;
  margin: 0 auto;
  width: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ddd;
  border-radius: 50px;
  padding: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
}
.bg-act-red {
  background-color: #c5363a;
  color: white;
}
.bg-act-yellow {
  background-color: yellow;
  color: white;
}
.bg-act-green {
  background-color: green;
  color: white;
}

<span class="btn-api"> Change to on Proccess </span>

Answer 1

将 $clickCounts 移至事件处理程序之外。也不需要 apiBtn() 函数，因为您使用的是不显眼的事件处理程序。

var clickCounts = 1;
$('.btn-api').click(function () {
    var $this = $(this);
    if ($clickCounts === 1) {
        $this.addClass('bg-act-red');
        $clickCounts += 1;
    } else if ($clickCounts == 2) {
        $this.addClass('bg-act-yellow');
        $clickCounts += 1;
    } else if ($clickCounts == 3) {
        $this.addClass('bg-act-green');
        $clickCounts += 1;
    }
});

但是，如果您有多个按钮，请使用 .data()用元素存储点击次数。

$('.btn-api')
    .data('clickCounts', 1) //Set defualt value
    .click(function () {
        var $this = $(this);
        var $clickCounts = $this.data('clickCounts');

        if ($clickCounts === 1) {
            $this.addClass('bg-act-red');
            $clickCounts += 1;
        } else if ($clickCounts == 2) {
            $this.addClass('bg-act-yellow');
            $clickCounts += 1;
        } else if ($clickCounts == 3) {
            $this.addClass('bg-act-green');
            $clickCounts += 1;
        }
        $this.data('clickCounts', $clickCounts);
    });

$('.btn-api').data('clickCounts', 1).click(function() {
  var $this = $(this);
  var $clickCounts = $this.data('clickCounts')
  if ($clickCounts === 1) {
    $this.addClass('bg-act-red');
    $clickCounts += 1;
  } else if ($clickCounts == 2) {
    $this.addClass('bg-act-yellow');
    $clickCounts += 1;
  } else if ($clickCounts == 3) {
    $this.addClass('bg-act-green');
    $clickCounts += 1;
  }  
  $this.data('clickCounts', $clickCounts);
});

.btn-api {
  display: block;
  margin: 0 auto;
  width: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ddd;
  border-radius: 50px;
  padding: 5px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
}
.bg-act-red {
  background-color: #c5363a;
  color: white;
}
.bg-act-yellow {
  background-color: yellow;
  color: white;
}
.bg-act-green {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="btn-api"> Change to on Proccess </span>
<span class="btn-api"> Change to on Proccess 2 </span>