当单击javascript时，我如何在图标之间切换？

Question

单击javascript时，如何在图标之间切换？

​

function mode() {
  var moon = document.getElementById("mode");
  moon.src = "https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png";
  moon.id = "lightmode";
  moon.onclick = lightmode();
}

function lightmode() {
  var sun = document.getElementById("lightmode");
  sun.src = "https://img.icons8.com/sf-black-filled/34/000000/sun.png";
  sun.onclick = mode();
}

body { background-color:grey }

<div class="nav-icons">
  <img id="mode" class="moon" onclick="mode()" src="https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png">
  <img id="notification" src="https://img.icons8.com/ios-glyphs/34/fffffe/notification-center.png" alt="" srcset="">
</div>

​

Answer 1

您正在以不正确的方式设置事件侦听器。

下面是使用类和数据属性的切换

​

const srcs = {
  "dark": "https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png",
  "light": "https://img.icons8.com/sf-black-filled/34/000000/sun.png"
};
const modeToggle = document.getElementById("modeToggle");
modeToggle.addEventListener("click", function() {
  let mode = this.dataset.mode;
  mode = mode === "dark" ? "light" : "dark"; // toggle
  this.src = srcs[mode]; // image
  this.dataset.mode = mode; // save in element
  document.body.classList.toggle("dark",mode==="dark"); // toggle page too
})
document.body.classList.toggle("dark",modeToggle.dataset.mode==="dark"); // initialise the page, possibly from localStorage

body {
  background-color: grey
}

body.dark {
  background-color: black;
}

<div class="nav-icons">
  <img id="modeToggle" data-mode="light" src="https://img.icons8.com/sf-black-filled/34/000000/sun.png">
  <img id="notification" src="https://img.icons8.com/ios-glyphs/34/fffffe/notification-center.png" alt="" srcset="">
</div>

​

Answer 2

这可能解决您的问题，请为您的函数使用正确的名称，例如，使用changeMode()代替mode()作为名称

javascript：

let isChanged = false;
let mode = document.querySelector('#mode');

function changeMode(){
  isChanged = !isChanged;
  if(isChanged) {
    mode.src = "https://img.icon8.com/sf-black-filled/35/ffffffe/moon-symbol.png"
  } else {
    mode.src = "https://img.icon8.com/sf-black-filled/34/000000/sun.png"
  }
}

Answer 3

在Javascript中，在两个不同的图像/图标/样式之间切换非常简单。例如，您可以为两个图标创建一个具有名称/值对的简单对象文字，如下所示。一个简单的ternary运算符根据当前的src确定src应该是什么。

​

document.querySelector('.nav-icons > img.sunmoon').addEventListener('click',function(e){
  let icons={
    sun:'https://img.icons8.com/sf-black-filled/34/000000/sun.png',
    moon:'https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png'
  };
  this.src = this.src==icons.moon ? icons.sun : icons.moon;
});

body {
  background-color: grey
}

<div class="nav-icons">
  <img class="sunmoon" src="https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png" />
  <img id="notification" src="https://img.icons8.com/ios-glyphs/34/fffffe/notification-center.png" alt="" srcset="" />
</div>

​