Javascript 更改a的背景色<；tr>；点击_Javascript_Jquery_Html_Css

Javascript 更改a的背景色<；tr>；点击

javascript jquery html css

Javascript 更改a的背景色<；tr>；点击,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在单击某个元素时更改其背景色。基本上，我希望能够在每次单击时来回切换此颜色以下是我使用的代码： function activateButton1() { var x = document.getElementById('postButton1'); if (x.className == 'postButton1') { x.className = 'postButton1on';

我试图在单击某个元素时更改其背景色。基本上，我希望能够在每次单击时来回切换此颜色

以下是我使用的代码：

        function activateButton1() {
            var x = document.getElementById('postButton1');

            if (x.className == 'postButton1') {
                x.className = 'postButton1on';
            } else {
                x.className = 'postButton1';
            }
        }

我正在使用两个不同的CSS类，它们有不同的背景颜色，但它不起作用。有人能提供任何见解吗？

这可以通过

切换方法完成：
function activateButton1() {
    this.classList.toggle("postButton1on");
}

您甚至可以在html中启动此命令以简化操作：
<tr onclick="this.classList.toggle('postButton1on')">...</tr>

。。。

然后只要在.postbuton1
css之后声明.postbuton1
css，则.postbuton1
背景色将覆盖先前设置的内容
 使用jQuery，您可以通过
$( "#postButton1" ).on('click', function(){
  $( this ).toggleClass( "postButton1on" );
};

可能不起作用，因为您可能混合了id
和class，因为它们的名称相同，至少在您发布的JS中是这样。
以下是打包在HTML文档中的所有内容，经过测试可以正常工作：
<!DOCTYPE html>
<html>
<head>
  <style>
    .off {
      background-color: white;
    }
    .on {
      background-color: red;
    }
  </style>
  <script>
    function change() {
      var x = document.getElementById('post');
      if (x.className.match('on')) {
        x.className = 'off';
      } else {
        x.className = 'on';
      }
    }
    function change2() {
      var x = document.getElementById('row');
      if (x.className.match('on')) {
        x.className = 'off';
      } else {
        x.className = 'on';
      }
    }
  </script>
</head>
<body>
  <button id="post" onclick="change()" class="on">hello</button>
  <table>
    <tr id="row" onclick="change2()" class="on">
      <td>hey</td>
      <td>hey</td>
    </tr>
  </table>
</body>
</html>


.关{
背景色：白色；
}
.在{
背景色：红色；
}
函数更改（）{
var x=document.getElementById（'post'）；
if（x.className.match（'on'））{
x、 className='off'；
}否则{
x、 className='on'；
}
}
函数更改2（）{
var x=document.getElementById（'row'）；
if（x.className.match（'on'））{
x、 className='off'；
}否则{
x、 className='on'；
}
}
你好
嘿
嘿
您是否也可以用HTML显示一个工作示例。假设x.classList.toggle（'postButton1on'）
应该可以解决您的问题，如果您正确地排列CSS，那么可能的重复项也会非常有用