将类更改为 jquery

Question

我是 jQuery 的新手，我遇到了与向具有特定 ID 的元素添加和删除类有关的问题。这就是我想做的（而且它工作得很好，但我想知道 jQuery-解决方案）：

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

这是我做的：

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

这可能是一个相当愚蠢的问题，但我就是找不到错误。

编辑：我添加了一个片段，因为语法本身似乎没问题。感谢您到目前为止的帮助:)

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

Answer 1

另一种方式；

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

Answer 2

你做的是正确的，见下面的例子。

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

Answer 3

这里有两个问题：

一个是css，id选择器覆盖样式

解决方案：

#myelement {
 fill: red;  
}

#myelement.myclass {
  fill: blue;
}

在处理 svg 元素时 jquery 本身存在问题 jQuery SVG, why can't I addClass?

解决方案：
```
$('#blub').click(function() {
  $('#myelement')[0].classList.toggle('myclass')
});
```

将类更改为 jquery

Change classes with jquery

javascript

jquery

toggleclass

将 类 更改为 jquery

Change classes with jquery

javascript

jquery

toggleclass

将类更改为 jquery