使用onClick更改onClick

Question

对于我正在编码的网站，我有一个界面，其中一个点包含4个图像:一个为标准，悬停，点击，并购买。它目前的工作方式是，当标准图像悬停在上面时，它会切换到悬停图像。单击悬停图像时，它会切换到所单击的图像。但我一直在努力让购买的图片在点击时显示出来。代码：

     <script>
        function on1() {
            var x = document.getElementById("1");
            x.src = "Hover1.png"; 
            x.style.width = "31%";
        }   
        function out1() {
            var x = document.getElementById("1");
            x.src = "Item1.png"; 
            x.style.width = "30%";
        }
    </script>
    <img src="Item1.png" width="30%" id="1" 
        onmouseover="on1();" 
        onmouseout="out1();" 
        onclick="this.src = 'Desc1.png';">`

如果能帮上忙，我们将不胜感激

Answer 1

您需要为事件添加一个函数处理程序，如下所示：

HTML代码：

<img src="Item1.png" width="30%" id="1" onclick="updateImage(this)">

JS代码：

updateImage = function(el){
    el.src = 'Desc1.png';
}

Answer 2

我不知道“购买”实际上是什么意思，但我看到你从一开始就试图让初始图像成为这个“购买”阶段的图像。

所以jquery代码应该能做到这一点：

$(document).ready(function(){
    var initial ='https://pbs.twimg.com/profile_images/587778453937618944/-z_faB4f.jpg';
    var hovering = 'http://www.gettyimages.fr/CMS/Pages/Embed_Frontdoor/StaticContent/hero_travel_482206371.jpg';
    var clicking = 'http://www.menucool.com/slider/prod/image-slider-2.jpg';
    $('#test')
    .attr('src',initial)
    .hover(function(ev){
        $(this).attr('src',hovering);
    })
    .mousedown(function(ev){
        $(this).attr('src',clicking);
    })
    .mouseup(function(ev){
        $(this).attr('src',initial);
    })
    .mouseout(function(ev){
        $(this).attr('src',initial);
    });
});

这是一个fiddle