jquery - 如何在jquery中切换前置

Question

我想通过一个按钮使用 jquery 切换 css 链接。

抓住的是，我想在 iframe 的目标中做到这一点。

到目前为止，我有以下代码，可以很好地插入链接：

$("#custom").click(function() {
    $("#content").contents().find("head").prepend("<link href=\"../build/css/custom.css\" rel=\"stylesheet\" id=\"custom-css\">");
});

这由以下 html 激活：

<div class="toggle-custom">
<a target="custom" id="custom" class="btn btn-primary btn-lg">Toggle custom style</a>
</div>
<iframe id="content" src="carousel.html" frameborder="0" scrolling="auto">
</iframe>

我知道删除它的方法是：

$("#content").contents().find("#custom-css").remove();

但是如何从同一个按钮切换它？

谢谢

Answer 1

尝试

var contents = $("#content").contents();
var ccss = contents.find("head").find("#custom-css");
if(ccss.length){
    ccss.remove()
} else {
    contents.find("head").prepend("<link href=\"../build/css/custom.css\" rel=\"stylesheet\" id=\"custom-css\">");
}

Answer 2

将链接放在 html 中，然后在单击时切换它。

$(document).ready(function(){
    $('#custom-css').hide();
    $("#custom").click(function() {
        $('#custom-css').toggle();
    });
});

Answer 3

这是完整的语法：

$("#custom").click(function() {
          var head = $("#content").contents().find("head");
    var ccss = head.find("#custom-css");
    if (ccss.length) {
        ccss.remove()
    } else {
        head.prepend("<link href=\"../build/css/custom.css\" rel=\"stylesheet\" id=\"custom-css\">");
    }
});