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关闭时打开。 两者也将占据相同的空间。