jquery - 简单的 jQuery 样式表交换器

Question

我正在尝试在网站上创建交换器。我有一个链接，我想在每次单击它时在两个 .css 文件之间交换。第一次点击后我看到类和文件正在交换，但第二次点击后什么也没有发生......

调用:

<a href="#" id="swaper" class="ozn color_ozn" >SWAP</a>

jQuery 代码:

google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
    $(".color_ozn").click(function(){
        $("link").attr("href", "link_to_style1.css");
        $("#swaper").removeClass("color_ozn");
        $("#swaper").addClass("color");
        return false;
    });

    $(".color").click(function(){
        $("link").attr("href", "link_to_style2.css");
        $("#swaper").removeClass("color");
        $("#swaper").addClass("color_ozn");
        return false;
    });

});

Answer 1

因为你是动态交换类，所以你必须使用 event delegation在这种情况下实现你想要的。

尝试，

$('body').on('click',".color_ozn",function(){
    $("link").attr("href", "link_to_style1.css");
    $("#swaper").removeClass("color_ozn");
    $("#swaper").addClass("color");
    return false;
});

和

$('body').on('click',".color",function(){
    $("link").attr("href", "link_to_style2.css");
    $("#swaper").removeClass("color");
    $("#swaper").addClass("color_ozn");
    return false;
});