jquery添加类和删除不工作的类

Question

我试图使.s按钮在单击.s按钮时将新元素添加到标记中，并删除.s类，并在单击.h类时添加新的类.h，元素从我的体内移除。</div><div>当单击.s添加<style>元素和单击.h删除<style>元素时，我希望</div><div>添加类"h“很好用！但是当单击.h <style>元素时，不要删除！！</div><div>我的代码：</div><pre><code>&lt;script type=&quot;text/javascript&quot;&gt; jQuery(document).ready(function () { var style = '&lt;style class=&quot;kha&quot;&gt;body{background:#000;}&lt;/style&gt;' jQuery(&quot;.s&quot;).click( function () { jQuery(&quot;body&quot;).append(style); jQuery(&quot;.s&quot;).addClass(&quot;h&quot;).removeClass(&quot;s&quot;); }); jQuery(&quot;.h&quot;).click(function () { jQuery(&quot;.kha&quot;).remove(); }); }); &lt;/script&gt;</code></pre><div>HTML：</div><pre><code> &lt;span class=&quot;s&quot;&gt;Black Color&lt;/span&gt;</code></pre><div></div>

Answer 1

您可以使用.toggleClass()：

​

var style = '<style class="kha">body{background:#000;}</style>';
jQuery(".s").click(function() {
  jQuery("body").append(style); // append the style
  if($(this).hasClass('h')){$('.kha').remove();} // check if class h is added 
  jQuery(this).toggleClass("s h"); // toggle the class to .s .h
});

.s {
  color: green;
}
.h {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='s'>s with h toggle.</div>

​

Answer 2

小提琴

$("#addClass").click(function () {

    $('#para1').addClass('highlight');

});

$("#removeClass").click(function () {

    $('#para1').removeClass('highlight');

});