Question

我必须编写包含12张图片和“显示”按钮的代码。当我按下显示按钮时，当我第二次按下显示按钮时，第一张照片消失，第二张照片也消失，此过程继续，直到所有12张照片都消失。当我第13次按下显示按钮时，第一张图片出现，当我第14次按下显示按钮时，第二张图片也出现，此过程一直持续到所有12张图片再次出现... 这是我写的代码，但遗憾的是它不起作用，请帮助我：

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

Answer 1

改为使用数组。

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

Answer 2

使用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：

.img {
display: none;
}

并且可以将以下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>

在head

中添加以下语句

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

我认为这可以解决它

Answer 3

你不需要这么多的条件语句，你需要的只是更复杂的标记和唯一标识第n次点击的第n个图像的方法。

我添加了一个课程＆＃39; img img - $ {index}＆＃39;并且您可以使用querySelector获取第n个图像并重复。

＆＃13;

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++;
    });
  });

＆＃13;

.bottom {
  height: 30px;
  width: 315px;
}

img.active {
  border: 1px solid red;
}

.table {
  margin-left: 0;
  text-align: center;
}

＆＃13;

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

＆＃13;

如何使用单个按钮在隐藏和显示多个图片之间切换

3 个答案: