Question

当我点击它时，如何用javascript更改css？我想将.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")这不是正确的选择器。您必须使用$(".javakast")。此外，您必须wrap函数中的$(document).ready()代码。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

在

中使用你的jquery方法

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

Answer 3

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

$Copyright

Answer 4

您正在使用jquery按类选择元素，然后您必须在其前面加上.。

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

如果你没有在身体的末尾包含你的脚本，那么使用jquery ready方法，就像这样

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

Answer 5

Jquery切换是打开/关闭单个类。你需要的是在两个不同的类之间切换。

请参阅此stackoverflow答案...

Easiest way to toggle 2 classes in jQuery

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

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

Answer 6

这是你所追求的解决方案。我认为您不想在javakast2上添加和删除.javakast之间切换，而是在类之间进行切换。如果元素具有javakast，则将其类替换为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>。

使用javascript onclick更改类css

7 个答案: