在 div 上添加 css 类答案

【问题标题】：Add css class on div在 div 上添加 css 类
【发布时间】：2013-11-30 23:36:08
【问题描述】：

我有以下 html 代码，我想在单击类“旋转”（我已包含在我的 css 中）添加到带有类“barklogo”的 div

<div class="barklogo loaded" data-width="40" data-anim="left">
<img src="/images/home/button.png" border="0" alt="Demo image">
</div>

我在这里找到了类似的帖子

JQUERY - add CSS class to BUTTON element after click

但是当我在 js 文件中输入以下代码时，它就不起作用了

 $(document).ready(function(){
  $('barklogo').click(function(){
       $(this).addClass('rotate');
  });
 });

这是 .rotate 类的 css 代码

.rotate{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

非常感谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您必须在 jquery 中使用 . 和类名。

 $('.barklogo').click(function(){

Class Selector (“.class”)

【讨论】：

【解决方案2】：

您也可以这样做：当你使用类选择器时使用.

$(document).ready(function(){
  $('.barklogo .loaded').click(function(){
       $(this).addClass('rotate');
  });
 });

【讨论】：

您的选择器错误。 $('.barklogo .loaded') 查找类为 loaded 的所有元素，这些元素是类 barklogo 的元素的后代。

【解决方案3】：

您错过了在选择器中添加.，

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

【讨论】：

【解决方案4】：

你错过了. class selector in jquery

将$('barklogo').click(function(){ 更改为$('.barklogo').click(function(){

【讨论】：

【解决方案5】：

它确实以这种方式工作。但是，如果您想以安全的方式添加在 div 中已经有多个类的 addClass，而不是通过其 ID 使用 addClass 到 div。例如，

$("#div_id").click(function(){
    //code 
});

这是你回答这个问题的有用方法。

<script>

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

</script>

【讨论】：