如何在JS中隐藏图片

Question

我正在尝试隐藏网站上显示的图片。 我有一个选项列表，其中我只选择一张要显示的图片和一个执行事件的按钮。 所以我的问题是，当我按下按钮时，图片只会隐藏片刻（我希望它们永远消失）。 我究竟做错了什么？

document.addEventListener("DOMContentLoaded", function () {

var select = document.querySelector(".form-control");
var img = document.querySelectorAll("img");
var submit = document.querySelector("button");

var imgApple = img[0];
var imgUbuntu = img[1];
var imgWindows = img[2];

submit.addEventListener("click", function () {
      if (select.value == "Windows") {
        imgApple.style.visibility = "hidden";
        imgUbuntu.style.visibility = "hidden";
      } else if (select.value == "Os X") {
        imgApple.style.visibility = "visible";
        imgUbuntu.style.visibility = "hidden";
      } else if (select.value == "Ubuntu") {
        imgApple.style.visibility = "hidden";
        imgWindows.style.visibility = "hidden";
      }
   });
});

Answer 1

而不是style.visibility尝试style.display （我也试图在的jsfiddle ）

   submit.addEventListener("click", function () {

if (select.value == "Windows") {
    imgWindows.style.display= "block";
    imgApple.style.display= "none";
    imgUbuntu.style.display= "none";
} else if (select.value == "Os X") {
    imgApple.style.display= "block";
    imgUbuntu.style.display= "none";
    imgWindows.style.display= "none";
} else if (select.value == "Ubuntu") {
    imgUbuntu.style.display= "block";
    imgApple.style.display= "none";
    imgWindows.style.display= "none";
}

我希望这会有所帮助。