堆栈内存溢出
  简体   繁体   English

如何通过一个按钮在隐藏和显示多张图片之间切换

[英]how to toggle between hiding and showing multiple pictures with a single button

 原文  2018-04-14 05:48:44  6   3    javascript/ html/ css

问题描述

I have to write a code that includes 12 pictures and a “display” button. 我必须编写一个包含12张图片和一个“显示”按钮的代码。 when I push display button first picture disappears when I push the display button for the second time, the second picture disappears too and this process goes on until all 12 pictures are disappeared. 当我按下显示按钮时，当第二次按下显示按钮时，第一张照片消失了，第二张照片也消失了，此过程一直进行到所有12张照片消失为止。 when I push display button for the 13th time, the first picture appears and when I push display button for the 14th time the second picture appears too and this process goes on until all twelve pictures appear again … this is the code I have written but unfortunately it doesn't work, please help me with it: 当我第13次按下显示按钮时，出现第一个图片，当我第14次按下显示按钮时，第二个图片也出现，并且此过程一直进行到所有十二个图片再次出现为止……这是我编写的代码，但不幸的是它不起作用，请帮我解决这个问题： 

<html>
<head>
</head>
<body>
<style type="text/css">
    .table{
    margin-left:0; 
    text-align:center;
}
</style>
  <table class="table" >
    <tr>
      <td><IMG SRC="blfy.gif" ALT="Butterflies" id="bfly"></td>
      <td><IMG SRC="eye.gif" ALT="Eye" id="eye"></td>
      <td><IMG SRC="wave.gif" ALT="Wave" id="wave"></td>
      <td><IMG SRC="jungle.gif" ALT="Jungle" id="jungle"></td>
    </tr>
    <tr>
      <td><IMG SRC="bridge.gif" ALT="Bridge" id="bridge"></td>
      <td><IMG SRC="duck.gif" ALT="Duck" id="duck"></td>
      <td><IMG SRC="egg.gif" ALT="Eggs" id="egg"></td>
      <td><IMG SRC="aurora.gif" ALT="Aurora" id="aurora"></td>
    </tr>
    <tr>
      <td><IMG SRC="it.gif" ALT="Technology" id="it"></td>
      <td><IMG SRC="hill.gif" ALT="Hills" id="hill"></td>
      <td><IMG SRC="string.gif" ALT="strings" id="string"></td>
      <td><IMG SRC="vegi.gif" ALT="vegetables" id="vegi"></td>
    </tr>
  </table>
<style type="text/css">
    .botton {
        height:30px;
        width:315px;
    }
</style>
<button class="botton"; onclick="dispfunc()">Display</button>
<script>
function dispfunc()
{
var a = document.getElementById("bfly");
var b = document.getElementById("eye");
var c = document.getElementById("wave");
var d = document.getElementById("jungle");
var e = document.getElementById("bridge");
var f = document.getElementById("duck");
var g = document.getElementById("egg");
var h = document.getElementById("aurora");
var i = document.getElementById("it");
var j = document.getElementById("hill");
var k = document.getElementById("string");
var l = document.getElementById("vegi");

    if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" )  
    {a.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {b.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {c.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {d.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {e.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {f.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {g.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {h.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {i.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {j.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "none" && l.style.display === "none" ) 
    {k.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "none" ) 
    {l.style.display = "block";}

    else if (a.style.display === "block" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {a.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "block" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {b.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "block" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {c.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "block" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {d.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "block" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {e.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "block" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {f.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "block" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {g.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "block" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {h.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "block" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {i.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "block" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {j.style.display = "none";}

    else if (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "block" && l.style.display === "block" ) 
    {k.style.display = "none";}


    else (a.style.display === "none" && b.style.display === "none" && c.style.display === "none" && d.style.display === "none" && e.style.display === "none" &&
    f.style.display === "none" && g.style.display === "none" && h.style.display === "none" && i.style.display === "none" && j.style.display === "none" &&
    k.style.display === "none" && l.style.display === "block" ) 
    {l.style.display = "none";}
}
</script>
</body>
</html>

3 个解决方案

解决方案1
 1  2018-04-14 05:54:59

Use an array instead. 请改用数组。 

const elements = ['bfly', 'eye', 'wave', 'jungle', 'bridge', 'duck', 'egg', 'aurora', 'it', 'hill', 'string', 'vegi']
  .map(document.getElementById);
let currentSelectedIndex = 0;
function dispfunc(){
  elements[currentSelectedIndex].style.display = 'none';
  currentSelectedIndex = (currentSelectedIndex + 1) % elements.length;
  elements[currentSelectedIndex].style.display = 'block';
}

解决方案2
 1  2018-04-14 06:45:03

Using jquery to solve it. 用jquery来解决。 This can solve show and hide of many images (ie more than 13 even) jquery: 这可以解决显示和隐藏许多图像（即甚至超过13个）jquery的问题： 

$(document).ready(function(){
var count = 0;
var hide = 0;
$( "#toogle" ).click(function() {   
if(hide%2==0) {
    if(count>=12) {
        count = 1;
    } else {
        count++;
    }
$( "#img" + count ).show();
}
else {
 $( "#img" + count ).hide();
}
 hide++;
});
});

css: CSS： 

.img {
display: none;
}

and the following html can be added to img take 并且可以将以下html添加到img take中 

<button id="toogle">toggle</button> //onclicking each image toggles
 <table class="table" >
<tr>
  <td><IMG SRC="blfy.gif" ALT="Butterflies" id="img1" class="img"></td>
  <td><IMG SRC="eye.gif" ALT="Eye" id="img2" class="img"></td>
  <td><IMG SRC="wave.gif" ALT="Wave" id="img3" class="img"></td>
  <td><IMG SRC="jungle.gif" ALT="Jungle" id="img4" class="img"></td>
</tr>
<tr>
  <td><IMG SRC="bridge.gif" ALT="Bridge" id="img5" class="img"></td>
  <td><IMG SRC="duck.gif" ALT="Duck" id="img6" class="img"></td>
  <td><IMG SRC="egg.gif" ALT="Eggs" id="img7" class="img"></td>
  <td><IMG SRC="aurora.gif" ALT="Aurora" id="img8" class="img"></td>
</tr>
<tr>
  <td><IMG SRC="it.gif" ALT="Technology" id="img9" class="img"></td>
  <td><IMG SRC="hill.gif" ALT="Hills" id="img10" class="img"></td>
  <td><IMG SRC="string.gif" ALT="strings" id="img11" class="img"></td>
  <td><IMG SRC="vegi.gif" ALT="vegetables" id="img12" class="img"></td>
</tr>

add following statement in head 在头上添加以下声明 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I think this can solve it 我认为这可以解决

解决方案3
 0  2018-04-14 06:34:28

you dont need so many conditional statements, All you need is a bit more sophisticated markup and way to uniquely identify the nth image for the nth click. 您不需要那么多的条件语句，您所需要的只是稍微复杂一点的标记和方法，以唯一地标识第n次点击的第n张图片。

I have added a classes 'img img-${index}' and you can use the querySelector to get the nth image and repeat. 我添加了一个类'img img-$ {index}'，您可以使用querySelector获取第n个图像并重复。 

 document.addEventListener('DOMContentLoaded', function() { var currentImgIndex = 0; var totalImages = 12; document.querySelector('.bottom').addEventListener('click', function() { var currnetIndex = currentImgIndex % totalImages; var currentActive = document.querySelector('.img.active'); if (currentActive) { currentActive.classList.remove('active'); } document.querySelector('.img-' + currnetIndex).classList.add('active'); currentImgIndex++; }); }); 
 .bottom { height: 30px; width: 315px; } img.active { border: 1px solid red; } .table { margin-left: 0; text-align: center; } 
 <table class="table"> <tr> <td> <img SRC="blfy.gif" ALT="Butterflies" id="bfly" class='img img-0' /> </td> <td> <img SRC="eye.gif" ALT="Eye" id="eye" class='img img-1' /> </td> <td> <img SRC="wave.gif" ALT="Wave" id="wave" class='img img-2' /> </td> <td> <IMG SRC="jungle.gif" ALT="Jungle" id="jungle" class='img img-3' /> </td> </tr> <tr> <td> <IMG SRC="bridge.gif" ALT="Bridge" id="bridge" class='img img-4' /> </td> <td> <IMG SRC="duck.gif" ALT="Duck" id="duck" class='img img-5' /> </td> <td> <IMG SRC="egg.gif" ALT="Eggs" id="egg" class='img img-6' /> </td> <td> <IMG SRC="aurora.gif" ALT="Aurora" id="aurora" class='img img-7' /> </td> </tr> <tr> <td> <IMG SRC="it.gif" ALT="Technology" id="it" class='img img-8' /> </td> <td> <IMG SRC="hill.gif" ALT="Hills" id="hill" class='img img-9' /> </td> <td> <IMG SRC="string.gif" ALT="strings" id="string" class='img img-10' /> </td> <td> <IMG SRC="vegi.gif" ALT="vegetables" id="vegi" class='img img-11' /> </td> </tr> </table> <button class="bottom">Display</button>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在隐藏和显示元素之间切换 - toggle between hiding and showing an element Javascript：使用切换按钮隐藏和显示div标签 - Javascript: Hiding and Showing div tag with a toggle button 在隐藏和显示元素之间切换 JavaScript 不起作用 - Toggle between hiding and showing an element with JavaScript is not working 在显示和隐藏文本之间切换（javascript） - Toggle between showing and hiding text (javascript) JavaScript显示/隐藏图片 - JavaScript showing/hiding pictures 如何使用一个按钮在折叠和阻止之间切换12张不同的图片 - how to switch between collapse and block for 12 different pictures with a single button 如何链接HTML img，以便在使用JavaScript隐藏/显示元素（在本例中为表格）之间进行切换？ - How do you link a HTML img to toggle between hiding/showing an element (in this case, a table) with javascript? 切换隐藏/显示元素 - Toggle Hiding/Showing an Element 如何使用按钮在数组中的多个 div 之间切换？ - How to toggle between multiple divs in an array using a button? 在ReactJs中切换显示和隐藏组件 - Toggle showing and hiding components in ReactJs
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM