用jquery更改类

Question

我是jQuery的新手，我遇到了将某个类添加到某个元素并将其删除的问题。这就是我想要做的（以及它工作得很好，但我想知道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'); 
 
    }); 
 
\t 
 
});

#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

这里有两个问题：

1. 一个是CSS，ID选择覆盖的样式。

   解决方案：

   #myelement { 
   fill: red; 
   } 
   
   #myelement.myclass { 
       fill: blue; 
   } 
   

2. 有问题与jQuery本身在处理SVG元素jQuery SVG, why can't I addClass?

   解决方案：

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

Answer 2

替代方式;

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

Answer 3

你做的是对的，请看下面的例子。

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