Question

我的网站上有一个简单的CSS样式切换器。我使用以下代码处理单击两个主题按钮的功能，启动从暗到亮的切换，反之亦然：

<script>
    $(function() {
    $(".light").click(function(){
        $("link").attr("href", "css/lightHome.css");
        $(".light").attr("disabled", "disabled");
        $(".dark").removeAttr("disabled", "disabled")

    })
    $(".dark").click(function(){
        $("link").attr("href", "css/home.css");
        $(".dark").attr("disabled", "disabled");
        $(".light").removeAttr("disabled", "disabled")
    })
});
</script>

关于它的一切都完全按照我的要求运行，除了当我点击按钮时没有任何反应。但第二个我点击后移动光标位置，然后切换发生。我没有最好的jQuery掌握，所以我希望它是对DOM过程的简单缺乏理解。可能与缺乏＆＃34;准备就绪＆＃34;？

我已经尝试过点击并等待几分钟，直到我移动光标才会发生任何事情。

网站：

http://watsoncn.info

Answer 1

尝试此功能：

function toggleCss(file, index) {
    var oldFile = document.getElementsByTagName("link").item(index);
    var newFile = document.createElement("link");
    newFile.setAttribute("rel", "stylesheet");
    newFile.setAttribute("type", "text/css");
    newFile.setAttribute("href", file);

    document.getElementsByTagName("head").item(0).replaceChild(newFile, oldFile);
}

$(".dark").on("click", function() {
    toggleCss("css/lightHome.css");
    $(".dark").attr("disabled", "disabled");
    $(".light").removeAttr("disabled", "disabled");
});

$(".light").on("click", function() {
    toggleCss("css/home.css");
    $(".light").attr("disabled", "disabled");
    $(".dark").removeAttr("disabled", "disabled");
});

Answer 2

尝试添加使用而不是JavaScript，但是＆＃34;复选框技巧＆＃34;。复选框处理程序设置为显示无，然后设置样式主样式，然后选中：选中样式处理器，就像单击它一样。有了这个，你就不能使用JavaScript，但如果你做的一切正确的话，让它100％正常运行，没有任何错误！

您可以在YouTube上找到DevTips频道

https://www.youtube.com/user/DevTipsForDesigners

在他的频道上你可以找到教程如何做到这一点！

jQuery函数没有响应＆＃34; .click＆＃34;直到我移动光标？

2 个答案: