stackoom
  简体   繁体   中英

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

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

Question

I have to write a code that includes 12 pictures and a “display” button. 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. 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: 

<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 answers

solution1
 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';
}

solution2
 1  2018-04-14 06:45:03

Using jquery to solve it. This can solve show and hide of many images (ie more than 13 even) 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: 

.img {
display: none;
}

and the following html can be added to 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

solution3
 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.

I have added a classes 'img img-${index}' and you can use the querySelector to get the nth image and repeat. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question toggle between hiding and showing an element Javascript: Hiding and Showing div tag with a toggle button Toggle between hiding and showing an element with JavaScript is not working Toggle between showing and hiding text (javascript) JavaScript showing/hiding pictures how to switch between collapse and block for 12 different pictures with a single button 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 How to toggle between multiple divs in an array using a button? Toggle showing and hiding components in ReactJs
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM