jquery - 如何根据背景主题替换 Logo (图像)

Question

我有两张不同的图片( Logo )，一张用于深色主题(它有浅色 Logo )，一张用于浅色主题(它有深色 Logo )。

用户可以自由选择深色主题或浅色主题。 但是我在更换 Logo 时遇到困难。有人可以帮我解决这个问题吗？

我的两个 .png 图像分别命名为 lightlogo.png 和 darklogo.png。当页面加载时，用户会看到深色主题的 UI。

这是我显示 Logo 的代码

<div class="nav-wrapper">
  <a href="#!" class="brand-logo">
    <image  src="../images/lightlogo.png" alt="image" id="imag"   class="hidden-xs " />
  </a>
</div>

这是我的主题代码

<div id="icon-div">
  <p>
    <i class="material-icons dp48">loop</i>
  </p>
  <div id="icon-element">
    <input type="button" id="light" value="light-theme"/>
  </div>
</div>

这是我的 js，用户可以在其中更改主题，我正在尝试为浅色背景(浅色主题)添加图像

$('#light').click(function() {
  if ($(this).val() == "light-theme") {
    $(this).val("dark-theme");
    changeCSS("styleLight.css", 0)
  }
  else {
    $(this).val("light-theme");
    changeCSS("styleDark.css", 0).attr("src" , "../images/darklogo.png");
  }
});

function changeCSS(cssFile, cssLinkIndex) {

  var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

  var newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", "/stylesheets/"+cssFile);

  document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

Answer 1

试试这个，我已经删除了 javascript 函数中的更改图像 src。

$('#light').click(function() {
  if ($(this).val() == "light-theme") {
    $(this).val("dark-theme");
    changeCSS("styleLight.css", 0)
    $('#imag').attr('src', "../images/darklogo.png");
  } else {
    $(this).val("light-theme");
    changeCSS("styleDark.css", 0)
    //.attr("src" , "../images/darklogo.png");
    $('#imag').attr('src', "../images/lightlogo.png");
  }
});

function changeCSS(cssFile, cssLinkIndex) {

   var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

   var newlink = document.createElement("link");
   newlink.setAttribute("rel", "stylesheet");
   newlink.setAttribute("type", "text/css");
   newlink.setAttribute("href", "/stylesheets/"+cssFile);

}

问题是您不能将 attr() 用于 javascript 函数。