CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
in2d
in2d

Reputation: 638

Change class css with javascript onclick

How can i change css with javascript when i click on it? I would like to change .javakast to .javakast2 and when i click multiple times on it should move back and forth.

<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>

Upvotes: 2

Views: 8739

Answers (7)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48407

You use $("javakast") and this is not the correct selector.You have to use $(".javakast").Also, you have to wrap code in $(document).ready() function.

$(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>

Upvotes: 3

Klaus Mikaelson
Klaus Mikaelson

Reputation: 572

$(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>

Don't forget to add <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> in your file.

Upvotes: 1

Adam Azad
Adam Azad

Reputation: 11297

This is the solution you're after. I don't think you want to toggle between adding and removing javakast2 on .javakast, but swapping between classes. If element has javakast then replace its class with javakast2, and vice versa.

$('#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>

Upvotes: 1

user4602228
user4602228

Reputation:

Jquery toggle is toggling a single class on / off. what you need is toggling between two different classes.

see this stackoverflow answer...

Easiest way to toggle 2 classes in jQuery

according to this answer you should try :

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

Upvotes: 1

ab29007
ab29007

Reputation: 7766

You are selecting an element by a class using jquery then you have to include a . in front of it.

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

and if you are not including your script at the end of the body then use jquery ready method, like this

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

Upvotes: 1

Shoaib Konnur
Shoaib Konnur

Reputation: 459

The should be bind to elements after page is ready. Here is the code for it.

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

Upvotes: 1

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

Use your jquery method inside

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

Upvotes: 3

Related Questions