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

Question

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

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

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

有人可以发布类似的示例吗？

Answer 1

使用 element.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' />