使用img中的javascript onclick使較大的圖像顯示/隱藏

Question

我不知道為什么這不起作用。 它以前在我的網站上正常工作，然后退出。 它在jsfiddle中不起作用，所以我假設這是一個編碼問題。 這是一個簡化的版本，其中有兩張全尺寸圖片，其中一張設置為顯示：阻止，另一張顯示：無。

通過onclick將javascript功能放入圖片的縮略圖中，以更改完整尺寸的圖片，以將顯示樣式更改為“無”或“阻止”。

這是JavaScript：

function show_pic(this_one) {
    document.getElementById(current).style.display = "none";
    document.getElementById(this_one).style.display = "block";
    current = this_one;
}

這是html：

<img src='image1.jpg' id='img0' style='width: 100%; height: auto; border: solid #fff; box-sizing:border-box; display:block;' />
<img src='image2.jpg' id='img1' style='width: 100%; height: auto; border: solid #fff; box-sizing:border-box; display:none;' />

<img src='image1.jpg' style='height: 66px;  cursor: pointer;' onclick="show_pic('img0')" />
<img src='image2.jpg' style='height: 66px;  cursor: pointer;' onclick="show_pic('img1')" />   

這是jsfiddle

Answer 1

您的代碼工作正常。 我打開JS小提琴，然后將代碼編輯為：

var current = "img0";
function show_pic(this_one) {
    document.getElementById(current).style.display = "none";
    document.getElementById(this_one).style.display = "block";
    current = this_one;
}

由於您使用的是.js文件，因此只需刪除scripts標簽即可。