Question

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

     <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 CODE：

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

JS CODE：

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

Answer 2

我不知道＆＃34; Bought＆＃34;实际上意味着，但是我看到你试图让初始图像从一开始就是＃34; Bought＆＃34;相。

所以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

使用onClick更改onClick

2 个答案: