Change classes with jquery

Question

I'm new to jQuery and I got a problem related to adding and removing classes to an element with a certain ID. This is what I want to do (and also it works just fine, but I want to know the jQuery-solution):

$('#blub').click(function() {
    document.getElementById('myelement').classList.toggle("myclass");
});

This is what I did:

$('#blub').click(function() {
    $('#myelement').toggleClass('myclass');
});

It's a fairly stupid question, probably, but I just can't find the mistake.

edit: I have added a snippet, as the syntax itself seems to be alright. Thanks your help so far :)

$('document').ready(function() {

  $('#blub').click(function() {
    $('#myelement').toggleClass('myclass');
  });
 
});

#myelement {
  fill: red;  
}

.myclass {
  fill: blue;
}

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

<button id="blub" style="border:none; background: none; width:300px; height:100px;">
  <svg width="100%" height="100%">
    <rect id="myelement" class="myclass" width="300" height="100" />
  </svg>
</button>

What's wrong with what you posted? It would appear to be the correct solution. — j08691, May 27 '15 at 16:29
Thanks your answer, but it just doesn't work. I don't know why, so I have added a snippet :) — timo, May 27 '15 at 16:44

score 1 · Answer 1 · answered May 27 '15 at 16:32

What you did is correct see the below example.

$('#blub').click(function() {
  $('#myelement').toggleClass('myclass');
});

#myelement {
  height: 200px;
  width: 200px;
  background-color: green;
}
#myelement.myclass {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="blub">Click</button>

<div id="myelement">
</div>

score 0 · Answer 2 · answered May 27 '15 at 16:31

0

Alternative way;

 $('#blub').click(function() {
   if($('#myelement').hasClass('myClass'))
      $('#myelement').removeClass('myclass');
   else
      $('#myelement').addClass('myclass');
 });

answered May 27 '15 at 16:31

Serhat MERCAN

1,078
3
14
31

score 0 · Accepted Answer · edited May 23 '17 at 12:30

0

There are two issues here:

One is css, the id selector overrides the styles.

Solution:

#myelement {
 fill: red;  
}

#myelement.myclass {
  fill: blue;
}

There is issue with jquery itself while dealing with svg elements jQuery SVG, why can't I addClass?

Solution:
```
$('#blub').click(function() {
  $('#myelement')[0].classList.toggle('myclass')
});
```

edited May 23 '17 at 12:30

Community

1
1

answered May 27 '15 at 17:32

roxxypoxxy

2,973
1
21
28

Change classes with jquery

3 Answers3