Javascript 每次在html页面中单击不同的按钮时，图像需要替换为另一个图像

我在一个html页面中有3个按钮，每个按钮都与一个图像相关联。 我需要的工作如下：

按钮A、按钮B、按钮C和图像A、图像B、图像C

单击按钮A时，应显示图像A。 单击按钮B时，ImageA应替换为ImageB。 单击按钮NC时，ImageB应替换为ImageC。 再次单击按钮时，ImageC应替换为ImageA

---

我只能使用javascript和html进行编码。有可能做到吗？如果是，您能给我一些示例代码供我参考吗？

请包括您尝试过的任何Javascript代码。如果您只是想通过javascript设置图像的源代码，可以在fiddle中看到这一点。 在按钮上使用自定义属性，如下所示：

<input type="button" class="imgBtn" value="A" id="btnA" imageSrc="https://www.w3schools.com/css/img_fjords.jpg" onClick="changeImage(this)">

但是，使用JQuery可以简化这一过程，而不需要onClick函数：

$('.imgBtn').on('click', function(e) {
    $('#newImg').attr('src', $(this).attr('imageSrc'));
});

---

你可以这样做

简单的HTML和JS初学者学习方法

开灯

---

关闭灯光下面是一个使用Javascript和HTML实现此功能的示例方法 例如：如果“图像”文件夹中有3个图像

+Images
 -a.png
 -b.png
 -c.png

然后您可以在javascript中执行以下操作：

    var a = "images/a.png";
    var b = "images/a.png";
    var c = "images/a.png";

   //this function will be used to change image source whenever button is clicked.
    function changeImage(i)
    {
        var img = document.getElementById("img");
        switch(i)
        {
            case 'a': img.setAttribute('src',a); break;
            case 'b': img.setAttribute('src',b); break;
            case 'c': img.setAttribute('src',c); break;
            default: return false;
        }
    }

您的HTML可能如下所示：

<input type="button" value="Button A" onClick="changeImage('a');">
<input type="button" value="Button B" onClick="changeImage('b');">
<input type="button" value="Button C" onClick="changeImage('c');">
<img id="img" width="320px" height="220px">

---

这是用纯JavaScript编写的。正如你所说，用作参考

请阅读我为每个变量、函数和事件提供的注释行

作用{ /** *在本例中，我将图像URL存储在javascript对象中 */ 变量图像={ a:{'url'：'http://www.markramseymedia.com/wp-content/uploads/2012/02/oneperson.jpg'}, b:{'url'：'http://kazguu.kz/wp-content/uploads/2016/11/vecher-poe%60zii.jpg'}, c:{'url'：'http://poskok.info/wp/wp-content/uploads/2015/03/pozija.jpg'}, } /** *把所有的钮扣都扣上 */ var buttons=document.queryselectoral.button； /** *获取图像元素 */ var img=document.getElementByIdchangeMe； /** *如果单击按钮，将调用此函数 */ changeImage=函数{ /** *获取“数据显示”值以确定必须显示的图像 */ var image=this.dataset.show； /** *将`style=display:none；`更改为`style=display:block` */ img.style.display=块； /** *设置'src'属性，以便动态加载图像 */ img.src=images[image].url； } /** *在每个按钮上注册单击事件 */ forvar i=0；i你能完成的图像。你能给我一个例子，我可以参考吗？是的，这是可能的。还有第二个问题：为什么要使用img.attr'src'而不是img.src？使用attr而不是src有什么好处吗？@richardmuritz我不知道是否有误解，但不知道是否有区别。多亏了对它的关注，我忘了使用javascript语法而不是jquery。你从w3schools.com上少量复制了这些代码。为什么不将站点作为您的awnser的来源？awnser的来源：

<input type="button" value="Button A" onClick="changeImage('a');">
<input type="button" value="Button B" onClick="changeImage('b');">
<input type="button" value="Button C" onClick="changeImage('c');">
<img id="img" width="320px" height="220px">