1

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

以下是我编写 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;
}

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

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

4

10 回答 10

3

你可以使用另一个类：

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>

您还可以使用 style 属性：

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

链接：

于 2013-10-19T07:39:34.780 回答
3

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

$(document).ready(function () {        
        $("#button1,#button2,#button3,#button4").live("click", function () {
            $(this).removeClass("buttonClassA");
            $(this).addClass("buttonClassB");
        });
    });
于 2013-10-19T07:43:37.610 回答
2

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

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

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

buttonClassB
{
    /*your style*/
}
于 2013-10-19T07:40:07.060 回答
1

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

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

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

于 2013-10-19T07:39:14.327 回答
1

你可以这样做

工作演示：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');
    }

})
于 2013-10-19T07:55:18.203 回答
1

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

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

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

于 2013-10-19T07:51:39.537 回答
1

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

您不需要复制所有内容。您可以只添加要更改的 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 */
 }

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

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

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

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

于 2013-10-19T07:54:06.563 回答
1

请检查此https://jsfiddle.net/8ors4p2c/

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

它的 CSS 是

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

这是JS代码

jQuery('.buttonClassA').click(function() {
  if(jQuery('.buttonClassA').hasClass('buttonClassB')) {
        jQuery('.buttonClassA').removeClass('buttonClassB');
  } else {
        jQuery('.buttonClassA').addClass('buttonClassB');
  }
});
于 2017-12-14T07:55:13.627 回答
0

我想您想更改组中按钮的背景，因此您想与它们相比更改其背景，试试这个；（四个按钮组）：

<!-- Call function for a button; id="btnButton1" for example -->
<button id="btnButton1" onClick= "chngBG(Event, 'btnButton1')">Button 1</button>


<script 
function chngBG(evt, MyButton) {
// Add your code to reset backgrounds to all other buttons

// set a background you want to the targeted button:
document.getElementById(MyButton).style.background = "#fff6a1";
}

</script>
于 2021-03-19T14:01:53.603 回答
0 

//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>
于 2017-08-18T13:49:42.530 回答