按钮切换以在图像和文本显示之间切换/ raphael js/ javascript / html

Question

在我目前的任务中，我得到了：

在 html 页面上创建一个切换按钮，通过更改显示在其上的文本（例如，在“向上”和“向下”，或“微笑”和“不微笑”之间切换）和通过也可以在两个图像之间切换。 一种。提示：您必须在按钮的侦听器回调函数之外使用“状态”变量来记住事件回调之间按钮的状态。 4. 使用切换按钮在微笑和皱眉之间切换嘴巴。在您的按钮“点击”侦听器中，使用“if”语句检查按钮的状态，以控制您是要微笑还是皱眉。

当我在网上搜索时，我很困惑 - 有很多方法可以创建一个按钮，在 Html 或 css 中。

有人可以发一个类似的例子吗？

Answer 1

使用 element.click 并提供回调 click 函数。在这种情况下，回调是更新函数。

在更新函数中，检查当前的 src，即图像元素的来源。相应地更新图像的 src 和按钮的文本。

我还在图像部分使其可交互。如果不需要，只需删除此行

imageElem.click(update);

var imageElem = document.getElementById('test_Img'),
  buttonElem = document.getElementById('test_Btn'),
  img1 = 'http://www.fantazia.org.uk/images/600px-Smiley_svg_small.png',
  img2 = 'http://www.clipartsgram.com/image/2060213170-sad-smiley-face-clipart-mclpbaqca.png';

imageElem.addEventListener("click", update);
buttonElem.addEventListener("click", update);

function update() {
  var src, text;

  if (imageElem.src === img1) {
    src = img2;
    text = 'Sad';
  } else {
    src = img1;
    text = 'Smile';
  }
  buttonElem.value = text;
  imageElem.src = src;
}

<input type = 'button' id="test_Btn" value = 'Smile'/>
<img id="test_Img" src='http://www.fantazia.org.uk/images/600px-Smiley_svg_small.png' />