Question

所以这是我遇到的一个非常简单的问题。我正在尝试为我的一项学校作业设置一个网页。这是一个在线订单，上面有我们销售的图片。我正在销售T恤，我首先在衬衫上展示设计的缩略图。我希望有能力让人们点击缩略图，并让图像交换到衬衫的完整图像。我已将这两个文件放在与index.html相同的目录以及java和php文件中。我的大部分HTML都是使用javascript生成的，我只是想弄清楚它为什么不能正常工作。 Showcase是我想要显示图片的div的名称。

生成包含我的缩略图的img div的代码：

Showcase.innerHTML += '< img src="GorgeThumb.jpg" alt="image not found" id="MiniGorge" onclick = "ImgSwap()">'

缩略图显示正常。但是当我尝试切换它们时它不起作用。这是我的函数::

function ImgSwap()
var MetalMini = (document.getElementById("MiniGorge"))
if (MetalMini.src === "GorgeThumb.jpg")
{
    document.getElementById("MiniGorge").src = "Metallica-Gorge.jpg";
}
else if (MetalMini.src === "Metallica-Gorge.jpg")
{
    document.getElementById("MiniGorge").src = "GorgeThumb.jpg";
}

我相信那里有人会嘲笑这个解决方案有多简单，但是如果有人可以帮忙解决这个问题我很乐意接受羞辱！：d

我尝试了下面的答案，但无法让它们发挥作用。只是一个更新：如果我使用它：

enter code here

function ImgSwap()
{
var MetalMini = document.getElementById("MiniGorge");
if (MetalMini.src = "GorgeThumb.jpg")
{
    MetalMini.src = "Metallica-Gorge.jpg";
}
}

似乎工作正常。它切换到大图像。但是，如果我使用

function ImgSwap()
{
var MetalMini = document.getElementById("MiniGorge");
if (MetalMini.src = "GorgeThumb.jpg")
{
    MetalMini.src = "Metallica-Gorge.jpg";
}
if (MetalMini.src = "Metallica-Gorge.jpg")
{
    MetalMini.src = "GorgeThumb.jpg";
}
}

所有这些都失败了，根本没有图像交换。

搞砸了！

所以我只是编写了太多的代码但是想出来了。我只是在onmouseover和onmouseout上调用2个单独的方法。谢谢大家的帮助！

解决方案：

Showcase.innerHTML += '<img src="GorgeThumb.jpg" id="MiniGorge" onmouseover="ImgSwapGorge()" onmouseout="ImgRevGorge()">';


function ImgSwapGorge()
{
var MetalMini = document.getElementById("MiniGorge");
if (MetalMini.src = "GorgeThumb.jpg")
{
    MetalMini.src = "Metallica-Gorge.jpg";
    MetalMini.id = "MegaGorge";
}
else
{
    MetalMini.src = "GorgeThumb.jpg";
}
}

function ImgRevGorge()
{
var MetalMini = document.getElementById("MegaGorge");
MetalMini.src = "GorgeThumb.jpg";
MetalMini.id = "MiniGorge";
}

所以希望如果有人在那里寻找一个（效率低下）但工作代码来切换图像的话呢！

Answer 1

您的问题可能是呈现代码。您可以尝试使用jQuery，也可以参见下面的代码。

$('#MiniGorge').on('click', function(){
    var name = $(this).attr('src');
    if(name == "GorgeThumb.jpg"){
        $(this).attr('src', "Metallica-Gorge.jpg");
    } else {
        $(this).attr('src', 'GorgeThumb.jpg');
    }
});

JavaScript图像交换

1 个答案: