Question

我想改变一个类onclick。我现在所拥有的：

<script>
function changeclass() {

var NAME = document.getElementById("myclass")

NAME.className="mynewclass"

} 
</script>

但是，当然，它不起作用。此外，它应该再次恢复到previuos状态onclick。

我的HTML：

<div id="showhide" class="meta-info" onclick="changeclass();">

所以，每当我按下#showhide时，myclass应该更改为mynewclass。提前感谢您的帮助！

Answer 1

使用jquery你可以做某事。像这样，它只会切换类。

$('.showhide').click(function() {
    $(this).removeClass('myclass');
    $(this).addClass('showhidenew');
});

如果要在每次单击时来回切换类，可以使用toggleClass，如下所示：

$('.showhide').click(function() {
    $(this).toggleClass('myclass');
    $(this).toggleClass('showhidenew');
});

Answer 2

您的getElementById正在寻找ID为“myclass”的元素，但在您的html中，DIV的ID为showhide。改为：

<script>
function changeclass() {

var NAME = document.getElementById("showhide")

NAME.className="mynewclass"

} 
</script>

除非你试图使用id“myclass”来定位另一个元素，否则你需要确保这样的元素存在。

Answer 3

使用此功能会将“mynewclass”添加到ID为myElement的元素中，并在下次调用时将其恢复。

<div id="showhide" class="meta-info" onclick="changeclass(this);">

function changeclass(element) {
    $(element).toggleClass('mynewclass');
}

或者更简单的jQuery方式（你可以在加载DOM之后运行它）

<div id="showhide" class="meta-info">

$('#showhide').click(function() {
    $(this).toggleClass('mynewclass');
});

请在此处查看此工作示例：http://jsfiddle.net/S76WN/

Answer 4

我认为：http://jsfiddle.net/Skooljester/S3y5p/1/应该这样做。如果我没有100％正确的班级名称，你可以将它们改为你需要的任何名称。

Answer 5

      <div class="liveChatContainer online">
        <div class="actions" id="change">
         <span class="item title">Need help?</span>
              <a href="/test" onclick="demo()"><i class="fa fa-smile-o"></i>Chat</a>
              <a href="/test"><i class="fa fa-smile-o"></i>Call</a>
              <a href="/test"><i class="fa fa-smile-o"></i>Email</a>
        </div>
              <a href="#" class="liveChatLabel">Contact</a>
     </div>
             <style>
               .actions_one{
               background-color: red;
                      } 
              </style>



           <script>
          function demo(){
      document.getElementById("change").setAttribute("class","actions_one");}
            </script>

Answer 6

另一个例子是：

btn.frame  =  CGRectMake(x,y,with,height);

Answer 7

我认为你的意思是你想要一个改变类的onclick事件。

如果有人访问了这个问题并且真的想要分配一个课程并且它是用JQUERY点击它，那么这就是答案。

这有点违反直觉，但如果你想通过改变类来改变onclick事件，你需要声明onclick事件以应用于父对象的元素。

<强> HTML

<div id="containerid">
     Text <a class="myClass" href="#" />info</a>
     Other Text <div class="myClass">other info</div>
</div>
<div id="showhide" class="meta-info">hide info</div>

文档就绪

$(function() {
     $("#containerid").on("click",".myclass",function(e){ /*do stuff*/ }
     $("#containerid").on("click",".mynewclass",function(e){ /*do different stuff*/ }
     $("#showhide").click(function() {changeclass()}
});

轻微调整您的Javascript

<script>
function changeclass() {
        $(".myClass,.myNewClass").toggleClass('myNewClass').toggleClass('myClass');
} 
</script>

如果您无法可靠地识别父对象，则可以执行以下操作。

$(function() {
     $(document).on("click",".myclass",function(e){}
     $(document).on("click",".mynewclass",function(e){}
});

如果您只是想隐藏这些项目，您可能会发现使用.hide（）和.show（）更简单。

Answer 8

对于超级简洁的方法，尝试：

<div onclick="$(this).toggleClass("newclass")">click me</div>

Javascript / Jquery更改类onclick？

8 个答案: