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

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

javascript html

使用javascript在html中随机显示/隐藏图像,javascript,html,Javascript,Html,我有一个包含两个图像的div 加载页面时，一个图像将显示，另一个图像将隐藏。单击显示的图像时，显示图像将隐藏，隐藏图像将显示。。。其他图像单击事件的处理过程相同。图像必须重叠，因为我不想有任何额外的空间。同时为两个图像提供相同的空间。。。。如何为此编写代码……编辑：制作一个cope片段，使我的建议更清晰设src1=https://cdn.pixabay.com/photo/2016/02/18/20/02/seljalandsfoss-1207955__340.jpg; 设src2=htt

我有一个包含两个图像的div

加载页面时，一个图像将显示，另一个图像将隐藏。单击显示的图像时，显示图像将隐藏，隐藏图像将显示。。。其他图像单击事件的处理过程相同。图像必须重叠，因为我不想有任何额外的空间。同时为两个图像提供相同的空间。。。。

如何为此编写代码……

编辑：制作一个cope片段，使我的建议更清晰

设src1=https://cdn.pixabay.com/photo/2016/02/18/20/02/seljalandsfoss-1207955__340.jpg; 设src2=https://cdn.pixabay.com/photo/2019/03/12/18/00/kerala-4051412__340.jpg; document.querySelectorpc1 img.addEventListener“单击”，事件=>{ 设el=document.querySelectorpc1 img 如果el.src===src1{ el.src=src2； el.alt=不可用 }否则{ el.src=src1； el.alt=可用 } } pc1{ 高度：200px；宽度：200px } pc1-img{ 对象匹配：覆盖；身高：100%；宽度：100%； } 试试这个：

首先，在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>

.pc{ 位置：相对位置； } .可见，.不可见{ 显示：块；位置：绝对位置；排名：0；左：0； } .不可见{ 显示：无； } //添加事件侦听器以在加载页面时等待 document.addEventListenerDomainContentLoaded，=>{ //获取两个图像的实例常量img1=document.getElementByIdimg1 常量img2=document.getElementByIdimg2 /** *此方法可切换图像的可见性 */ const-toggleImage=image=>{ image.classList.toggleunvisible } //隐藏可见图像1 切换图像img1 //显示不可见的图像2 切换图像IMG2 //在图像2上按鼠标键为用户添加事件侦听器 img2.addEventListenermousedown，mouseup，=>{ //隐藏可见图像1 切换图像img1 //显示隐藏图像2 切换图像IMG2 } };

因此，您可以使用DOM模型切换类unvisible，隐藏一个图像并显示另一个图像。

因为两个图像都是同一元素的子元素，所以您可以在父元素上设置事件侦听器

常量切换图像==>{ //获取父包装器元素 const pc1=document.getElementById'pc1'； //如果pc1存在如果pc1{ //单击“附加事件” pc1.addEventListener'click'，=>{ pc1.classList.toggle'is-active'；//toggle'is-active'class }; } }; 切换图像； pc1{ 显示：内联块； } /*默认情况下隐藏最后一个图像*/ pc1:not.is-active img:last child{ 显示：无； } pc1.is-active img：第一个孩子{ 显示：无； }

到目前为止你尝试了什么？你应该开始弄脏你的手：从一些类似的问题中获得一些灵感。我什么也没试过。。。。因为自2005年以来。。。我没有在javascript上做任何事情。。。我忘了。。我想使用图像作为链接…document.querySelectorpc1 img始终先聚焦imgyes，但您首先只需要div中的一个图像元素。查看当单击显示的图像时，显示的图像将隐藏，隐藏的图像将显示在op post中。您需要获取单击的img的src。不是单个的第一个我理解，但我在这里提出的建议是，在示例中根本不使用两个图像元素。当只有一个图像元素可供选择时，无需担心选择错误的图像。哇，我的糟糕，当我本应只使用单数时有三个等号。修复，谢谢。当页面加载显示的两个图像时。。。我只想在页面加载后显示一个图像…我说你需要在第二个img中添加一种显示样式：无