Question

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

Catch是，我想在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\">");
    }
});

如何在jquery中切换前置

3 个答案: