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";
}

我希望能帮上忙。

如何在JS中隐藏图片

1 个答案: