Javascript顯示/隱藏圖片

Question

當顯示特定圖片時，如何根據其ID刪除（隱藏）圖片。 這是我到目前為止所得到的：

function setImageinVisible(id) {
    var img = document.getElementById(id);
    img.style.visibility = 'visible';
}

Answer 1

首先，優良作法說，您不應該直接弄亂對象的樣式，而應該切換對象的類（因為https://en.wikipedia.org/wiki/Separation_of_concerns ）。 我的建議是創建一個像

.is-hidden {
  display: none;
}

然后只需使用jquery，純JS或其他功能（例如）將此類切換到特定元素即可。

$('.my-image').addClass('is-hidden') // to hide
$('.my-image').removeClass('is-hidden') // to show

使用純JS：

document.querySelector('.my-image').classList.add('is-hidden')
document.querySelector('.my-image').classList.remove('is-hidden')

更新：

在顯示一個之前，要重置先前狀態（將所有圖像設置為隱藏）：

// to add.is-hidden from every image (to hide all the images)
[].map.call(document.querySelectorAll('img'), function(el) {
    el.classList.add('is-hidden');
});
// to show choosen image
document.querySelector('.my-image').removeClass('is-hidden')

Answer 2

注意： toggle-vader-button ， ("#Vader")和("#Palpatine")均基於我正在處理的項目。 將您的照片ID替換為

$ (document).ready(function() {
    $("#toggle-vader-button").on("click", function () {
        $("#Vader").toggle();
        $("#Palpatine").toggle();
    });
});

當一個關閉時，另一個打開。 另請注意，我在CSS中將Palpatine的顯示顯示為“ none”（無），因此它會在Vader關閉時打開。 兩者也將占據相同的空間。