将 class css 更改为 javascript onclick

Question

如何在单击时将 css 更改为 javascript？我想将 .javakast 更改为 .javakast2，当我多次点击它时，它应该来回移动。

<script>
$(".ribad").click(function(){
    $("javakast").toggleClass("javakast2");
});
</script>

CSS

.javakast{
    background-color:blue;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:-20px;
    position:absolute;
    z-index:999999;
}
.javakast2{
    background-color:red;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:300px;
    position:absolute;
    z-index:999999;
}

HTML

<div class="ribad">

<div class="javakast"></div>

<div>

Answer 1

您使用 $("javakast") 并且这不正确 selector.You 必须使用 $(".javakast")。另外，您必须 wrap 代码在 $(document).ready() 函数中.

$(document).ready(function(){
  $(".ribad").click(function(){
      $(".javakast").toggleClass("javakast2");
  });
});

$(".ribad").click(function(){
    $(".javakast").toggleClass("javakast2");
});

.javakast{
    background-color:blue;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:-20px;
    position:absolute;
    z-index:999999;
}
.javakast2{
    background-color:red;
    width:200px;
    height:200px;
    margin-top:-20px;
    margin-left:-20px;
    position:absolute;
    z-index:999999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ribad">

<div class="javakast"></div>

<div>

Answer 2

在里面使用你的jquery方法

<script>
    $(function(){
       $(".ribad").click(function(){
           $(".javakast").toggleClass("javakast2");
       });
    });
</script>

Answer 3

应该在页面准备好后绑定到元素。这是它的代码。

<script>
$(document).ready(function(){
    $(".ribad").click(function(){
      $("javakast").toggleClass("javakast2");
   });
});
</script>

Answer 4

您正在使用 jquery 通过 class 选择一个元素，然后您必须在其前面包含一个 .。

<script>
$(".ribad").click(function(){
    $(".javakast").toggleClass("javakast2");
});
</script>

如果您没有在正文末尾包含脚本，则使用 jquery ready 方法，例如

$(document).ready(function(){
  $(".ribad").click(function(){
      $(".javakast").toggleClass("javakast2");
  });
});

Answer 5

Jquery 开关正在打开/关闭 单个 class。您需要的是在两个不同的 classes 之间切换。

查看这个 Whosebug 答案...

Easiest way to toggle 2 classes in jQuery

根据这个答案你应该试试：

$(".ribad").click(function(){
    $(".javakast, .javakast2").toggleClass("javakast javakast2");
});

Answer 6

这就是您想要的解决方案。我不认为您想在 .javakast 上添加和删除 javakast2 之间切换，而是在 class 之间切换。如果元素具有 javakast，则将其 class 替换为 javakast2，反之亦然。

$('#toggle').on('click', function(){

    // Save matches to a variable
    var classJSK  = $(".javakast:not(.javakast2)");
    var classJSK2 = $(".javakast2:not(.javakast)");

    classJSK.each(function(){
       $(this).addClass('javakast2').removeClass('javakast');
    });

    classJSK2.each(function(){
       $(this).removeClass('javakast2').addClass('javakast');
    });
  
});

div {
    width:100px;
    height:100px;
}
.javakast{
    background-color:blue;
}
.javakast2{
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle</button>
<div class="javakast"></div>
<div class="javakast2"></div>

Answer 7

$(function () {
    $("#ribad").click(function () {
        $(".javakast").switchClass("javakast", "javakast2");
        $(".javakast2").switchClass("javakast2", "javakast");
    });
});

.javakast{
   color:red;
}
.javakast2{
   color:blue;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ribad" id="ribad">
    <div class="javakast" id="javakast">
       <h1>Click me to change class</h1>
    </div>
</div>

不要忘记在您的文件中添加 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>。

将 class css 更改为 javascript onclick

Change class css with javascript onclick

html

javascript

css

jquery

animation