多次单击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);
    });

＆＃13;

＆＃13;

$('.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);
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你也可以用一个很好的Switch语句来解决它：

var $clickCounts = 1;

$('.btn-api').click(function() {
  switch ($clickCounts) {
    case 1:
      $(this).addClass('bg-act-red');
      $clickCounts++
      break;
    case 2:
      $(this).addClass('bg-act-yellow');
      $clickCounts++;
      break;
    case 3:
      $(this).addClass('bg-act-green');
      $clickCounts
      break;
  }
});