javascript - 为什么此代码不起作用(网址肯定没问题)，但什么也没有发生

Question

单击时，url 必须更改，图像也必须更改。我失去了大约 6 小时的生命来寻找解决方案，但现在我在这里。谁能帮忙...

/*
-----------------------------------------
Right-top sound box
-----------------------------------------
*/
function init() {
  let rtsb = document.querySelector('#backSound');

  function changeSound() {
    // changing sound image:
    let url1 = "url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338')";
    let url2 = "url('https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285')";
    let imSrc = rtsb.style.backgroundImage;
    imSrc = url1;

    if (imSrc === url1) {
      imSrc = url2;
    } else if (imSrc === url2) {
      imSrc = url1;
    }
  }

  rtsb.addEventListener('click', changeSound);
}

document.addEventListener('readystatechange', function() {
  if (document.readyState === "complete") {
    init();
  }
});

<div id="backSound" style="height:200px"></div>

Answer 1

您假设 css 将与您设置的完全匹配。问题是它会改变值(value)。在您的情况下，它正在将 ' 更改为 "，因此它不会匹配。

function init() {
  let rtsb = document.querySelector('#backSound');

  function changeSound() {
    // changing sound image:
    let url1 = 'url("https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOn1.jpg?v=1595501327338")';
    let url2 = 'url("https://cdn.glitch.com/00f52d97-70e5-4e02-98af-d0b48468a631%2FsoundOff2.jpg?v=1595501337285")';
    let imSrc = rtsb.style.backgroundImage;
    if (imSrc === url1) {
      rtsb.style.backgroundImage = url2;
    } else {
      rtsb.style.backgroundImage = url1;
    }
  }

  rtsb.addEventListener('click', changeSound);
}

document.addEventListener('readystatechange', function() {
  if (document.readyState === "complete") {
    init();
  }
});

<div id="backSound" style="height:200px">xxx</div>

更好的解决方案是只切换一个 css 类。