【问题标题】:How do i switch the button icon from nightmode to day mode?如何将按钮图标从夜间模式切换到白天模式?
【发布时间】:2022-01-01 08:53:06
【问题描述】:

在下面的代码中,我将一些 js/jQuery 链接到我的 html 中的元素,这应该是不言自明的。我已经在控制台记录了每个 if else 语句以查看问题所在,并且它似乎卡在了第一个 if 语句上。

function toggleDisplay() {
var icon = document.getElementById("togglebutton");
var night_icon = 'assets/Feed_Toggle_Night.png'
var day_icon = 'assets/Feed_Toggle_Day.png'
$("displaytog").on("click", () => {
    if (icon.src == night_icon) {
        icon.src = day_icon;
        console.log("success1");
    }else {
        icon.src = night_icon;
        console.log("success2");
    }
})
}
toggleDisplay();
<displaytog>
  <img src="assets/Feed_Toggle_Night.png" id="togglebutton"/>
</displaytog>

【问题讨论】:

  • 也许你需要=====,即在你的if条件中使用比较运算符而不是赋值运算符=
  • 在将第一个 if 语句更改为您提到的比较运算符后,无论 src 等于什么,都只会执行 else 语句

标签: javascript html jquery jquery-events


【解决方案1】:

您无意中将icon.src 分配给night_icon。更改您的条件以检查它们是否包含您的任何路径。您需要使用 includes 的原因是因为 src 是完整路径,而您的条件使用相对路径。 src 看起来像这样 - "https://fiddle.jshell.net/_display/assets/Feed_Toggle_Day.png"

 if (icon.src.includes(night_icon))

【讨论】:

  • 我改变了 if 语句,但现在只有 else 语句正在执行
  • 请再次粘贴while代码...
  • 上面重新编辑的代码
  • 我修改了我的答案,所以它会起作用。请立即检查。
  • 绝对传奇。将您的答案标记为正确谢谢
猜你喜欢
  • 1970-01-01
  • 2018-11-22
  • 1970-01-01
  • 2019-05-22
  • 2023-01-04
  • 1970-01-01
  • 2020-02-14
  • 1970-01-01
  • 2018-08-06
相关资源
最近更新 更多