使用jQuery添加，然后删除（然后添加）连续点击样式表

Question

我正在尝试创建一个按钮，将更改网站上的字体。从本质上讲，我只需要按钮来检查样式表是否存在，然后将其删除，如果没有，则添加它。

这是我目前使用的代码（这会导致样式表添加，然后重新添加在连续点击）：

<script type="text/javascript"> 
if (jQuery('#opendyslexic').length) { 
    jQuery('#opendyslexic-toggler').click(function() { 
      jQuery('#opendyslexic').remove(); 
    }); 
} 
else { 
    jQuery('#opendyslexic-toggler').click(function() { 
     jQuery('<link rel ="stylesheet" href="http://example.com/wp-content/css/opendyslexic.css" type="text/css" id="opendyslexic">').appendTo("head"); 
    }); 
}; 
</script> 

所以，它的代码添加样式而言的工作范围内，但它不会按预期删除样式表。

Answer 1

在这里，您在每次点击按钮时绑定多个事件。而只有一个单击事件。

您还需要设置样式表的禁用属性，因为样式仍在内存中。这将是一个更好的主意，而不是删除和添加它。

jQuery('#opendyslexic-toggler').click(function() { 
    var $styleSheet = jQuery('#opendyslexic'); 

    $styleSheet.prop('disabled') ? $styleSheet.prop('disabled', false) 
            : $styleSheet.prop('disabled', true); 
});