试图在点击Jquery时切换CSS链接的样式 "href"。

Question

试图在点击元素时进行黑暗模式的切换。

1. toggle div class = .dark__mode
2. css链接类=.css-link。
3. css链接href变量=style__old

我正在学习jquery，我觉得代码的推理和结构有很大的问题。

链接的href先变了，但没有变回来。

请帮助，或者如果使用复选框选项会更好

window.onload = function(){

    var  style__old = $(".css-link").attr("href");

    $(".dark__mode").click(function(){

            if (style__old == "css/style.css"){
                var style__new = style__old.replace("style.css","dark-mode.css");
                $(".css-link").attr("href", style__new);
            }
            else
            if (style__old == "css/dark-mode.css"){
                style__old.replace("dark-mode.css","style.css");
                $(".css-link").attr("href", "style__old");
            }
    }

);}

Answer 1

你使用的动态改变加载样式表的方法不是很可靠。

一个更好的方法是把所有相关的样式放在页面中，分别放在不同的样式表中，然后 toggle() 阶级上的一个低级元素，如 body然后把所有的选择器挂在上面。

在实践中，它将看起来像这样。

jQuery($ => {
  $('.dark__mode').on('click', (e) => {
    e.preventDefault();
    $('body').toggleClass('dark');
  })
});

/* Normal layout */
div { color: #0C0; }
a { color: #C00; }

/* Dark layout */
body.dark {
  background-color: #333;
  color: #FFF;
}
body.dark div { color: #CCC; }
body.dark a { color: #CC0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="dark__mode">Toggle</a>
<div>
  <p>Lorem ipsum dolor sit</p>
  <a href="#">Amet consectetur adipcing elit</a>
</div>