Question

不知道我要去哪里错了，但是图标并没有改变。

$( ".inner-switch" ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
      $( "nav" ).removeClass( "dark-force" );
      $( "body" ).removeClass( "dark" );
      $(this).find("i").toggleClass("fas fa-moon");
    } else {
      $( "body" ).addClass( "dark" );
      $( "nav" ).addClass( "dark-force" );
      $(this).find("i").toggleClass("fas fa-sun");
    }
});

.dark {
    background-color: #222;
}

.dark-force * {
    background-color: #222;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

  <nav class="navbar">
    <div class="hero-body">
      <div class="container">
        <div class="navbar-brand">

          <a href="/">
            <img src="{% static 'portfolio/Logo.png' %}" width=60>
          </a>

          <div class="navbar-end">

            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-primary is-rounded is-outlined">
                  <strong>Blog</strong>
                </a>
              </div>
            </div>

            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-primary is-rounded">
                  <strong>Say Hello!</strong>
                </a>
              </div>
            </div>

            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-primary is-rounded inner-switch">
                  <i class="fas fa-moon"></i>
                </a>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </nav>

它确实切换到黑暗模式，但是图标拒绝从月球改变（fas fa-moon）。我是javascript新手，但对HTML和CSS相当熟悉。任何帮助表示赞赏。祝您有美好而安全的一天！感谢您的阅读！

Answer 1

您已经很近了，并且您的代码看起来很不错，但是您需要使用addClass和removeClass来切换fas fa图标从sun到moon和vice versa。

$(this).find("i").removeClass("fa-sun").addClass('fa-moon');

使用toggleClass时，现有的图标仍然存在，并且新图标无法正常工作。

实时工作演示：

$(".inner-switch").on("click", function() {
  if ($("body").hasClass("dark")) {
    $("nav").removeClass("dark-force");
    $("body").removeClass("dark");
    $(this).find("i").removeClass("fa-sun").addClass('fa-moon');
  } else {
    $("body").addClass("dark");
    $("nav").addClass("dark-force");
    $(this).find("i").removeClass("fa-moon").addClass('fa-sun');
  }
});

.dark {
  background-color: #222;
}

.dark-force * {
  background-color: #222;
}

.fa-sun {
 color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="navbar-item">
  <div class="buttons">
    <a class="button is-primary is-rounded inner-switch is-outlined">
      <i class="fas fa-moon"></i>
    </a>
  </div>
</div>

Answer 2

问题在于您仅每隔第二次切换一次日月类。您需要每次同时切换它们！

$(this).find("i").toggleClass("fa-moon").toggleClass("fa-sun");

仅供参考，您不需要切换fas类，因为您始终需要它。另外，您无需将代码放在if / else中来复制代码-每次单击时都需要切换它们，因此您只需将其直接包含在功能。

工作示例：

$(".inner-switch").on("click", function() {
  // toggle moon and sun every time
  $(this).find("i").toggleClass("fa-moon").toggleClass("fa-sun");

  if ($("body").hasClass("dark")) {
    $("nav").removeClass("dark-force");
    $("body").removeClass("dark");
} else {
 $("body").addClass("dark");
    $("nav").addClass("dark-force");
  }
});

.dark {
  background-color: #222;
}

.dark-force * {
  background-color: #222;
}

.button {
  font-size: 3em;
  color: #f00
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<div class="navbar-item">
  <div class="buttons">
    <a class="button is-primary is-rounded inner-switch is-outlined">
      <i class="fas fa-moon"></i>
    </a>
  </div>
</div>

Answer 3

切换背景色时，还需要切换字体颜色。

$("#lightswitch i").click(function() {
    var isDark = $("body").is(".dark");
    $("body").toggleClass("dark", !isDark);
    $(this).toggleClass("fa-moon", isDark).toggleClass("fa-sun", !isDark);
});

body.dark {
  background-color: #222;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<body>
  <div class="navbar-item">
    <div class="buttons">
      <a id="lightswitch" class="button is-primary is-rounded inner-switch is-outlined">
        <i class="fas fa-moon"></i>
       </a>
     </div>
  </div>
</body>

通过javascript切换fas fa图标-暗/亮模式

3 个答案: