在同一个按钮中添加不同的图像

Question

我有一个圆形按钮，我想在其中添加一个图像，并在单击同一个按钮时将该图像更改为另一个图像。

先让按钮中看到的图像为“a.svg”，点击按钮后看到的图像为“b.svg”。 这是我的小代码：

<div class="btn" style="float: right;">
<button class="showhide"><img></button></div>

我认为我们应该做一些 javascript，我需要你的帮助，我不想要 jquery。

Answer 1

您可以在 JQuery 中使用一个简单的标志来计算要显示的图像。

下面的 sn-p 显示了这一点：

var img = 0;

$('.showhide').click(function (e) {
  setImage();
});

function setImage() {
  var src = 'https://via.placeholder.com/150';
  if (img++ == 1) {
    img = 0;
    src = 'https://via.placeholder.com/200';
  }
  $('.showhide > img').attr('src', src);
}

setImage();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn" style="float: right;">
<button class="showhide"><img></button></div>

基本上，当单击按钮时，图像会在两个定义的图像之间切换。

您可以很容易地扩展它以使用数组中的图像源，而不是将其硬编码为单个图像：

var img = 0;
var images = [ 'https://via.placeholder.com/150', 'https://via.placeholder.com/200', 'https://via.placeholder.com/250' ];

$('.showhide').click(function (e) {
  setImage();
});

function setImage() {
  if (img > images.length - 1) {
    img = 0;
  }
  $('.showhide > img').attr('src', images[img++]);
}

setImage();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn" style="float: right;">
<button class="showhide"><img></button></div>

OP 评论：我希望它在 javascript 中而不是在 jQuery 中

对于没有 JQuery 的纯 JS 解决方案，只需将 JQuery 元素修改为它们的复合 JavaScript 元素：

var img = 0;
var images = [ 'https://via.placeholder.com/150', 'https://via.placeholder.com/200', 'https://via.placeholder.com/250' ];
var showHide = document.getElementById('showhide');
var showHideImg = document.getElementById('showhideimg');

showHide.addEventListener('click', function (e) {
  setImage();
});

function setImage() {
  if (img > images.length - 1) {
    img = 0;
  }
  showHideImg.src = images[img++];
}

setImage();

<div class="btn" style="float: right;">
<button class="showhide" id="showhide"><img id="showhideimg"></button></div>