我的这个div包含两个图像。
<div class="pc" id="pc1">
<img src="available.png" alt="Available">
<img src="unavailable.png" alt="UnAvailable">
</div>
在加载页面时,将显示一张图像,而另一张图像将隐藏。当单击显示的图像时,显示的图像将隐藏,而隐藏的图像将显示...其他图像单击事件的相同过程。图像必须重叠,只是因为我不想要任何额外的空间。同时显示两个图像的空间相同。 如何为此编写代码。...
答案 0 :(得分:0)
尝试一下:
首先在您的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>
答案 1 :(得分:0)
<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模型来切换类“不可见”并隐藏一幅图像并显示另一幅图像。
答案 2 :(得分:0)
由于两个图像都是同一元素的子元素,因此可以在父元素上设置事件侦听器。
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>
答案 3 :(得分:-1)
您可以将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>
答案 4 :(得分:-2)
编辑:提出了一个摘要,以使我的主张更加清晰。
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"
}
})