使用 vanilla javascript 函数切换图像源

Question

我正在尝试使用 Javascript 在单击时交换 SVG 徽标图像。我的脚本如下所示：

document.querySelector('.logo').addEventListener('click', function() {
    document.querySelector('#logo-switch').src='logo-B.svg';
    document.querySelector('#logo-switch').src='logo-A.svg';
    })

该函数在第一次点击时起作用（当第三行代码被删除时）： document.querySelector('#logo-switch').src='logo-A.svg';

但是，我希望每次单击徽标时它都能切换回原始 src — 这应该起到切换的作用。

这是用 if 语句完成的吗？或者这是如何实现的？

非常感谢

Answer 1

您需要检查哪个徽标是最新的，然后将其替换为另一个。它也可以通过三元运算符来完成，但在这种情况下 if-else 更 human-readable/understandable。

正如您在 OP 中描述的那样，该功能在第一次点击时运行良好，因此假设点击处理程序工作正常，下面是要添加的条件

document.querySelector('.logo').addEventListener('click', function() {
    if (document.querySelector('#logo-switch').src.indexOf('logo-A') != -1) {
      document.querySelector('#logo-switch').src = 'logo-B.svg';
    } else {
      document.querySelector('#logo-switch').src = 'logo-A.svg';
    }
})

Answer 2

使用 closure 怎么样？

document.querySelector('.logo').addEventListener(
  'click',
  switchImage(
    document.querySelector('#logo-switch'),
    'logo-B.svg',
    'logo-A.svg'
  )
);

function switchImage (element, src1, src2) {
  var first = true;
  return function () {
    if (first) {
      element.src = src1;
      first = false;
    } else {
      element.src = src2;
      first = true;
    }
  }
}

编辑：使用来自@kooiinc

的片段

document.querySelector('.logo').addEventListener(
  'click',
  switchImage(
    document.querySelector('#logo-switch'),
    '//upload.wikimedia.org/wikipedia/commons/1/1f/Skip_to_right3.svg',
    '//upload.wikimedia.org/wikipedia/commons/a/af/Skip_to_left3.svg'
  )
);

function switchImage (element, src1, src2) {
  var first = true;
  return function () {
    if (first) {
      element.setAttribute('href', src1);
      first = false;
    } else {
      element.setAttribute('href', src2);
      first = true;
    }
  }
}

.logo,
#logo-switch {
  width: 150px;
  height: 150px;
  display: inline-block;
  cursor: pointer;
}

<svg class="logo">
  <image id="logo-switch" href="//upload.wikimedia.org/wikipedia/commons/a/af/Skip_to_left3.svg">
</svg>

Answer 3

此代码有效：-

let replaced = false;

document.querySelector('.logo').addEventListener('click', function() {
    document.querySelector('#logo-switch').src = replaced ? 'logo-A.svg' : 'logo-B.svg';
    replaced = !replaced;
});

如果有意义的话，这使用一个变量来跟踪内容是否被交替替换。然后在此基础上，它更改图像的源文件。

Answer 4

为 .logo 元素使用额外的 css-class 并为此使用 toggle that on click. The snippet is using event delegation。

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.classList.contains(`logo`)) {
    return evt.target.classList.toggle(`right`);
  }
}

.logo {
  width: 150px;
  height: 150px;
  display: inline-block;
  background: url(//upload.wikimedia.org/wikipedia/commons/a/af/Skip_to_left3.svg) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.right {
  background-image: url(//upload.wikimedia.org/wikipedia/commons/1/1f/Skip_to_right3.svg);
}

<div class="logo"></div>

使用 vanilla javascript 函数切换图像源

Toggle image source with vanilla javascript function

html

javascript

css

svg

image