jQuery添加類和刪除類不起作用

Question

我嘗試在單擊.s按鈕時將.s按鈕添加到標簽中並添加新元素，然后刪除.s類，並在單擊.h類時添加新的.h類，從我的身體中刪除<[style]>元素

我想要在單擊.s時添加<[style]>元素，並在單擊.h時刪除<[style]>元素

添加類“ h”的效果很好！ 但是當單擊.h <[style]>元素時，不能刪除！

我的代碼：

<script type="text/javascript">
    jQuery(document).ready(function () {

        var style = '<style class="kha">body{background:#000;}</style>'

        jQuery(".s").click( function () { 
            jQuery("body").append(style);
            jQuery(".s").addClass("h").removeClass("s");
        });

        jQuery(".h").click(function () { 
            jQuery(".kha").remove();
        });

    });
</script>

HTML：

 <span class="s">Black Color</span>

Answer 1

小提琴

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

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

});

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

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

});

Answer 2

您可以使用.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("sh"); // 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>