在 jQuery 中单击按钮时更改按钮颜色

Question

我在 Whosebug 上看到多个线程与此 post 的相同标题相关，但我要问的是不同的。我正在尝试在 jQuery 中编写代码，假设我的默认按钮颜色是 gray，我希望我单击一次它将转换为 green，当我单击 twice btn or click green btn 再一次变成red。总的来说，当我单击 btn 时，它将 green，当我单击 double 时，它将 red，当我单击 third 时，它将默认颜色为 grey 或当我点击 green 时它会 red 而当我点击 red 时它会 grey

我想 post 这个 btn 数据当 If btn is grey then btn value = 0 same when green == 1 and when red == 3

我尝试编写代码，但我只知道单击功能而没有 btn 值.. 请帮助我创建此代码..

jQuery("#my_styles .btn").click(function() {
  jQuery("#my_styles .btn").removeClass('active');
  jQuery(this).toggleClass('active');
});

.active{
    background:red;
}
button.btn:active{
    background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML--
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="1" value="0">Button1</button>
  <button type="submit" class="btn btn-warning" id="2" value="0">Button2</button>
</div>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="3" value="0">Button3</button>
  <button type="submit" class="btn btn-warning" id="4" value="0">Button4</button>
</div>

Answer 1

我使用 value 来改变颜色和 val();

看这个例子：

jQuery("#my_styles .btn").click(function() {
  var button=jQuery(this).val();
  if(button==1){
  jQuery(this).removeClass('activegreen');
  jQuery(this).toggleClass('activered');
  jQuery(this).val('3');
  }else if(button==0){
  jQuery(this).toggleClass('activegreen');
  jQuery(this).val('1');
  }else{
  jQuery(this).removeClass('activered');
  jQuery(this).val('0');
  }
  });
jQuery("#reset").click(function() {   
  jQuery('#my_styles .btn').val('0');
  jQuery('#my_styles .btn').removeClass('activered');
  jQuery('#my_styles .btn').removeClass('activegreen');
  
});

button.btn{
background:grey;
}
.activered{
    background:red!important;
}

.activegreen{
    background:green!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML--
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="1" value="0">Button1</button>
  <button type="submit" class="btn btn-warning" id="2" value="0">Button2</button>
</div>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="3" value="0">Button3</button>
  <button type="submit" class="btn btn-warning" id="4" value="0">Button4</button>
</div>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="reset" value="4">Reset</button>

</div>

所以现在当你点击一次将是 green 和 val=1，如果再次点击将是 red 和 val=3 再点击将是 [=17] =] 与 val=0

Answer 2

您可以检查 class 并以此方式更改颜色。如果我没有正确理解您的问题，请告诉我:)

JavaScript

$( '#myButton' ).click( function() {
  this.isGreen = $( '#myButton' ).hasClass( 'green' );
  this.isGray = $( '#myButton' ).hasClass( 'gray' );
  this.isRed = $( '#myButton' ).hasClass( 'red' );
  
  if ( this.isGray ) {
      $( '#myButton' ).removeClass( 'gray' ).addClass( 'green' );
      this.value = 1;
  }
  else if ( this.isGreen ) {
      $( '#myButton' ).removeClass( 'green' ).addClass( 'red' );
      this.value = 2;
  }
  else if ( this.isRed ) {
      $( '#myButton' ).removeClass( 'red' ).addClass( 'gray' );
      this.value = 0;
  }
  
  console.log( this.value ); // do whatever you want with the value
} );

CSS

#myButton.green {
  background: green;
}

#myButton.gray {
  background: gray;
}

#myButton.red {
  background: red;
}

HTML

<button id="myButton" class="gray" value="0">
  Sample
</button>

Answer 3

var clickCount = 0;
$("#my_styles .btn").click(function() {
  clickCount++;
  console.log(clickCount);
  if(clickCount % 2 == 0 ) {
    $(this).addClass('red');
  }else {
  $(this).removeClass('red');
  $(this).toggleClass('green');
  }
});

$("#my_styles .btn").dblclick(function(){
  $(this).toggleClass('green');
  $(this).toggleClass('red');
});

.green{
   background:green;
}

.red {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12" id="my_styles">
  <button type="submit" class="btn btn-warning" id="1" value="0">Button1</button>
  <button type="submit" class="btn btn-warning" id="2" value="0">Button2</button>
</div>

检查此代码。它会对你有所帮助。但是您的方法以后会引起问题。所以，我建议稍微改变一下你的方法。不要对同一个按钮使用双击和单击功能，否则会导致问题。

在 jQuery 中单击按钮时更改按钮颜色

change button color when we click on it in jQuery

html

css

jquery

click

button