如何用一个按钮在折叠和阻止 12 张不同的图片之间切换

这是我写的代码，但不幸的是它不起作用

有12张图片和2个按钮。显示按钮和缩放按钮当我第一次点击显示按钮时，如果第一张图片不可见，它就会变得可见，如果它是可见的，它就会变得不可见。当我第二次单击显示按钮时，图片 2 会发生同样的事情，并且对所有 12 张图片重复此过程。

<html>
<head>
<script src="jquery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var count = 0;
$( "#dispbtn" ).click(function() {  
var x=("#img"+count) 
if (x.style.display==="collapse") {
    if(count>=12) {
        count = 1;
    } else {
        count++;
    }
$ (x.style.display="block";
});
else {
$ (x.style.display="collapse";
});
});
});
</script>
<style>
.botton {
  height: 30px;
  width: 315px;
}
.table {
  margin-left: 0;
  text-align: center;
  }
.img {
  display: block;
}
</style>
</head>
<body>
<table class="table">
  <tr>
    <td>
      <img SRC="IMG/blfy.gif" ALT="Butterflies" id="img1" class='img' />
    </td>
    <td>
      <img SRC="IMG/eye.gif" ALT="Eye" id="img2" class='img' />
    </td>
    <td>
      <img SRC="IMG/wave.gif" ALT="Wave" id="img3" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/jungle.gif" ALT="Jungle" id="img4" class='img' />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="IMG/bridge.gif" ALT="Bridge" id="img5" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/duck.gif" ALT="Duck" id="img6" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/egg.gif" ALT="Eggs" id="img7" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/aurora.gif" ALT="Aurora" id="img8" class='img' />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="IMG/it.gif" ALT="Technology" id="img9" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/hill.gif" ALT="Hills" id="img10" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/string.gif" ALT="strings" id="img11" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/vegi.gif" ALT="vegetables" id="img12" class='img' />
    </td>
  </tr>
</table>
</br>
<button class="botton"; id="dispbtn";>Display</button>
<button class="botton"; id="zoombtn";>Zoom</button>

</body>
</html>

很难理解你想完成什么，但我想我有一个想法。这是我使用vanilla JS的解决方案，我也在我的代码中放了一些注释，所以它可以引导你完成它是如何工作的。

(function() {
  // set init count value
  var count = 0;
  // add click event to button
  document.getElementById('display').onclick = function() {
    // grab all the images
    var images = document.querySelectorAll('img.images');
    // holder for single image
    var image;
    // check if all images are not displayed yet
    if (count < images.length) {
      count++;
    } else {
      // reset counter and hide all images
      count = 1;
      for (var x = 0; x < images.length; x++) {
        image = images[x];
        image.style.display = 'none';
      }
   }
   image = document.getElementById('image-' + count);
   image.style.display = 'block';
 }
})();

body {
  text-align: center;
}
img.images {
  width: 200px;
  height: 100px;
  margin: 5px auto;
  display: none;
}
div#display {
  background-color: #000;
  padding: 5px 15px;
  cursor: pointer;
  color: #FFF;
  display: inline-block;
}

<div id="display">Display</div>
<img src="https://placekitten.com/400/200" class="images" id="image-1" />
<img src="https://placekitten.com/500/200" class="images" id="image-2" />
<img src="https://placekitten.com/600/200" class="images" id="image-3" />

希望这有帮助！

除了我评论的语法错误之外，还有几个方面值得注意：

我个人认为将香草JS与jQuery混合没有错(尽管我可能会在几分钟内因为这么说而受到抨击(，但前提是(没有冒犯(你知道自己在做什么。如果这样做：

var x = $('#img1');

x将是一个 jQuery 对象，而不是一个 dom 元素，你不能对它执行x.style ，要访问样式属性，你必须首先访问 jQuery 对象内的实际 dom 元素：

x[0].style
为了一次显示一张图像并在一次隐藏一张图像之后，您需要先正确设置count然后获取相应的图像标签。
不知道"collapse"是否存在为display的适当值，因此在我的示例中，我使用 "none" .

$(document).ready(function(){
  var count = 0;
  $("#dispbtn").click(function() {
    //set correct count first
    if(count>=12) {
       count = 1;
    } else {
       count++;
    }
    //getting jQuery object with img tag in it
    var x=$("#img"+count);
    
    
    if (x[0].style.display==="none") {
      
      x[0].style.display="block";
    }
    else {
      x[0].style.display="none";
    }
  });
});

.botton {
  height: 30px;
  width: 315px;
}
.table {
  margin-left: 0;
  text-align: center;
  }
.img {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <td>
      <img SRC="IMG/blfy.gif" ALT="Butterflies" id="img1" class='img' />
    </td>
    <td>
      <img SRC="IMG/eye.gif" ALT="Eye" id="img2" class='img' />
    </td>
    <td>
      <img SRC="IMG/wave.gif" ALT="Wave" id="img3" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/jungle.gif" ALT="Jungle" id="img4" class='img' />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="IMG/bridge.gif" ALT="Bridge" id="img5" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/duck.gif" ALT="Duck" id="img6" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/egg.gif" ALT="Eggs" id="img7" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/aurora.gif" ALT="Aurora" id="img8" class='img' />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="IMG/it.gif" ALT="Technology" id="img9" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/hill.gif" ALT="Hills" id="img10" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/string.gif" ALT="strings" id="img11" class='img' />
    </td>
    <td>
      <IMG SRC="IMG/vegi.gif" ALT="vegetables" id="img12" class='img' />
    </td>
  </tr>
</table>
<br>
<button class="botton" id="dispbtn">Display</button>
<button class="botton" id="zoombtn">Zoom</button>
</body>
</html>

相关内容

最新更新

热门标签：