jQuery 如何在运行时在单击事件上更改 html 按钮的类？

How to change the class of an html button at runtime on its click event?

提问by Alessandro Minoccheri

I have following buttons in my html page:

我的 html 页面中有以下按钮：

<button id="button1" onclick="myFunction()" class="buttonClassA"></button>
<button id="button2" onclick="myFunction()" class="buttonClassA"></button>
<button id="button3" onclick="myFunction()" class="buttonClassA"></button>
<button id="button4" onclick="myFunction()" class="buttonClassA"></button>

Following is my css file where I have written buttonClassA

以下是我在其中编写 buttonClassA 的 css 文件

.buttonClassA
{
    display: block; width:auto; height:auto; padding:5px; margin-top:10px;

    background: #398525; /* old browsers */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #5ea617;
    border-radius: 10px;

    font:26px times-new-roman; 
    text-align: center;
    text-decoration: none;
    color: #147032;
    text-shadow: 0px 1px 2px #b4d1ad;

    -moz-transition: color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}

My Requirement: When I click any button, its background should change.

我的要求：当我点击任何按钮时，它的背景应该会改变。

How should I do it? Should I create another class buttonClassB in which I just change background color and copy all other things from buttonClassA? If this is the approach, then how can I change the class of the button at runtime when button is clicked? Please suggest?

我该怎么做？我应该创建另一个类 buttonClassB，在其中更改背景颜色并从 buttonClassA 复制所有其他内容吗？如果这是方法，那么如何在单击按钮时在运行时更改按钮的类？请建议？

回答by leaf

You could use another class:

你可以使用另一个类：

function myFunction () {
  $(this).toggleClass('buttonClassB');
};

.buttonClassB {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction.call(this)">Click me</button>

You could also use the style attribute :

您还可以使用 style 属性：

function myFunction () {
    $(this).css('background', 'red');
    // <button style="background:red">
};

Links :

链接：

• http://api.jquery.com/toggleClass
• http://api.jquery.com/css

• http://api.jquery.com/toggleClass
• http://api.jquery.com/css

回答by Chirag Arvadia

Yes, you can add/remove class using jquery

是的，您可以使用 jquery 添加/删除类

$(document).ready(function () {        
        $("#button1,#button2,#button3,#button4").live("click", function () {
            $(this).removeClass("buttonClassA");
            $(this).addClass("buttonClassB");
        });
    });

回答by Alessandro Minoccheri

In jQuery you can do this to remove tha actual class and assign another class to your element:

在 jQuery 中，您可以这样做来删除实际的类并将另一个类分配给您的元素：

$(document).ready(function(){
    $('.buttonClassA').click(function(){
       $(this).removeClass('buttonClassA').addClass('buttonClassB');
    });
});

inside your css put another class called .buttonClassb

在你的 css 中放置另一个名为 .buttonClassb 的类

buttonClassB
{
    /*your style*/
}

回答by Sergio

Making another class just for the background can be a good idea. Then you can remove the inline script and use something like this:

为背景创建另一个类可能是一个好主意。然后您可以删除内联脚本并使用以下内容：

$('.buttonClassB').click(function(){
     $(this).addClass('buttonClassB');
});

If you want it to go back again on click you could use toggleClass('buttonClassB')

如果您希望它在单击时再次返回，您可以使用toggleClass('buttonClassB')

回答by Rajesh Paul

in place of onclick=myFunction()use the following JS code:

代替onclick=myFunction()使用以下 JS 代码：

onclick="this.className=''; this.style.backgroundColor='gray';

If you dont need much of CSS to define the new style then you can simply modify some of the style attributes(e.g. in this case background-color) you can simply use JS to control that.

如果您不需要太多的 CSS 来定义新样式，那么您可以简单地修改一些样式属性（例如在这种情况下background-color），您可以简单地使用 JS 来控制它。

回答by ZER0

How should I do it? Should I create another class buttonClassB in which I just change background color and copy all other things from buttonClassA? If this is the approach, then how can I change the class of the button at runtime when button is clicked? Please suggest?

我该怎么做？我应该创建另一个类 buttonClassB，在其中更改背景颜色并从 buttonClassA 复制所有其他内容吗？如果这是方法，那么如何在单击按钮时在运行时更改按钮的类？请建议？

You do not need to copy everything. You can just add the CSS properties you want to change. The rest will be inherited. So let's say only the background:

您无需复制所有内容。您只需添加要更改的 CSS 属性即可。其余的将被继承。所以让我们只说背景：

.buttonClassB {
    background: #398525; /* old browsers */
    background: linear-gradient(to bottom, #8DD297, #398525); /* standard */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* old firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
 }

I would also suggest to use the unprefixed and standard value in your code – some browsers already have them, as Firefox.

我还建议在您的代码中使用无前缀和标准值——一些浏览器已经有了它们，如 Firefox。

Then, you can simple toggle the class when a button is clicked. Depends if you want remove the class when the same button is clicked again, you have to use addClassor toggleClass:

然后，您可以在单击按钮时简单地切换类。取决于您是否想在再次单击同一按钮时删除该类，您必须使用addClass或toggleClass：

$(".buttonClassA").on("click", function() {
    $(this).toggleClass("buttonClassB");
});

Just replace toggleClasswith addClassif you want make the change persistent instead of toggle it.

如果您想让更改持久化而不是切换它，只需替换toggleClass为addClass。

回答by kasper Taeymans

you could do it this way

你可以这样做

Working demo: http://jsfiddle.net/J68sp/

工作演示：http: //jsfiddle.net/J68sp/

$('button').on('click', function(){
    var btn=$(this);
    if(btn.attr('class')=='buttonClassA'){

         btn.removeClass('buttonClassA').addClass('buttonClassB');
    }
    else{
        btn.removeClass('buttonClassB').addClass('buttonClassA');
    }

})

回答by Prasanna

Please check this https://jsfiddle.net/8ors4p2c/

请检查这个https://jsfiddle.net/8ors4p2c/

<button id="button1" class="buttonClassA">hello</button>

Its CSS is

它的 CSS 是

.buttonClassA {
  background-color: green;
}
.buttonClassA.buttonClassB {
  background-color: red;
}

and here is the JS code

这是JS代码

jQuery('.buttonClassA').click(function() {
  if(jQuery('.buttonClassA').hasClass('buttonClassB')) {
        jQuery('.buttonClassA').removeClass('buttonClassB');
  } else {
        jQuery('.buttonClassA').addClass('buttonClassB');
  }
});

回答by Sachin from Pune

//This Is My Jquery or JavaScript Code
$( "button" ).click(function() {
  $( this ).toggleClass( "green" );
});

/*This Is My CSS Code*/
.orange {
    background: Orange;
    color: white;
    text-align:center;
  line-height:50px;
  border-radius: 30px;
  width: 100px;
  height: 50px;
  }
  
.green {
   
  background-color: green;
  color: white;
  
  }

<! -- This Is My HTML Code -->

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
  <head>
  <body>
<button class="orange">hello</button>
</body>

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <style>
  .blue {
   width: 100px;
  height: 50px;
  background-color: green;
  color: white;
  text-align:center;
  line-height:50px;``
  border-radius: 30px;
  }
  .red {
    background: red;
    color: white;
  }
  </style>
  <head>
  <body>
<button class="blue">hello</button>
<script>
$( "button" ).click(function() {
  $( this ).toggleClass( "red" );
});
</script>
</body>