Question

我的这个div包含两个图像。

<div class="pc" id="pc1">
  <img src="available.png" alt="Available">
  <img src="unavailable.png" alt="UnAvailable">
</div>

在加载页面时，将显示一张图像，而另一张图像将隐藏。当单击显示的图像时，显示的图像将隐藏，而隐藏的图像将显示...其他图像单击事件的相同过程。图像必须重叠，只是因为我不想要任何额外的空间。同时显示两个图像的空间相同。如何为此编写代码。...

Answer 1

尝试一下：

首先在您的head标签中包含jquery：

<head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head>

好，现在将第一个img设置一个类，将另一个img设置一个类，并将第二个图像的样式设置为不显示

<div class="pc" id="pc1">

<img class="img1" src="available.png" alt="Available">
<img class="img2" src="unavailable.png" alt="UnAvailable" 
style="display:none">

</div>

现在您需要为此添加脚本：

<script>
$( ".img1" ).click(function() {
$( ".img1" ).hide();
$( ".img2" ).show();
 });
  $( ".img2" ).click(function() {
$( ".img2" ).hide();
 $( ".img1" ).show();
 });
 </script>

Answer 2

<style>
  .pc {
    position: relative;
  }
  .visible, .unvisible {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .unvisible {
    display: none;
  }
</style>

<script>
  // add event listener to wait when page is load
  document.addEventListener("DOMContentLoaded", () => { 
    // get instances of both images
    const img1 = document.getElementById("img1")
    const img2 = document.getElementById("img2")
    /**
     * this method toggle visibility of image
    */
    const toggleImage = (image) => {
      image.classList.toggle("unvisible")
    }
    // hide visible image #1
    toggleImage(img1)
    // show unvisible image #2
    toggleImage(img2)
    // Add event listener for user press a mouse key on image #2
    img2.addEventListener("mousedown, mouseup", () => {
      // hide visible image #1
      toggleImage(img1)
      // show hidden image #2
      toggleImage(img2)
    })
  });
</script>

<div class="pc" id="pc1">
  <img id="img1" src="available.png" alt="Available">
  <img id="img2" class="unvisible" src="unavailable.png" alt="UnAvailable">
</div>

因此，您可以使用DOM模型来切换类“不可见”并隐藏一幅图像并显示另一幅图像。

Answer 3

由于两个图像都是同一元素的子元素，因此可以在父元素上设置事件侦听器。

const toggleImages = () => {
  // get the parent wrapper element
  const pc1 = document.getElementById('pc1');
  
  // if #pc1 exists
  if (pc1) {
  
    // attach an event click
    pc1.addEventListener('click', () => {
    	pc1.classList.toggle('is-active'); // toggle `is-active` class
    });
  }
};

toggleImages();

#pc1 {
  display: inline-block;
}

/* Hide last image by default */
#pc1:not(.is-active) img:last-child { 
  display: none; 
}

#pc1.is-active img:first-child {
  display: none;
}

<div class="pc" id="pc1">
  <img src="https://via.placeholder.com/175/000000?text=First+Image" alt="Available">
  <img src="https://via.placeholder.com/175/33414D?text=Second+Image" alt="UnAvailable">
</div>

Answer 4

您可以将JavaScript与click事件一起使用。

// first picture
var pic1 = document.getElementById('pic1');

// second picture
var pic2 = document.getElementById('pic2');

// the div
var pc1 = document.getElementById('pc1');

// change if user clicks
pc1.addEventListener('click', () => {
    if(pic1.hidden) {
        pic1.hidden = false;
        pic2.hidden = true;
    } else {
        pic1.hidden = true;
        pic2.hidden = false;
    }
})

还可以这样设置html：

 <div class="pc" id="pc1"><img src="available.png" alt="Available" id="pic1"><img src="unavailable.png" alt="UnAvailable" id="pic2" hidden></div>

Answer 5

编辑：提出了一个摘要，以使我的主张更加清晰。

let src1 = "https://cdn.pixabay.com/photo/2016/02/18/20/02/seljalandsfoss-1207955__340.jpg";
let src2 = "https://cdn.pixabay.com/photo/2019/03/12/18/00/kerala-4051412__340.jpg";

document.querySelector("#pc1 img").addEventListener('click', event => {
    let el = document.querySelector("#pc1 img")

    if (el.src === src1) {
        el.src = src2;
        el.alt = "Unavailable"
    } else {
        el.src = src1;
        el.alt = "Available"
    }
})

#pc1 {
  height: 200px;
  width: 200px
}

#pc1 img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

<div class="pc" id="pc1">
    <img src="https://cdn.pixabay.com/photo/2016/02/18/20/02/seljalandsfoss-1207955__340.jpg" alt="Available">
</div>

div内只有一个图像元素

<div class="pc" id="pc1">
    <img src="available.png" alt="Available">
</div>

和单击元素时更改图像的src。

document.querySelector("#pc1 img").addEventListener('click', event => {
    let el = document.querySelector("#pc1 img")
    if (el.src === "src of the first image") {
        el.src = "src of the other image"
        el.alt = "alt of the other image"
    } else {
        el.src = "src of the first image"
        el.alt = "alt of the first image"
    }
})

使用javascript随机显示/隐藏html中的图像

5 个答案: