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

Javascript显示/隐藏图片

2 个答案: