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

Question

this is the code I have written but unfortunately it doesn't work 这是我编写的代码，但不幸的是它不起作用

there are 12 pictures and 2 button. 有12张图片和2个按钮。 display button and zoom button when I click on the display button for the first time, if the first picture is invisible it becomes visible and if that's is visible it becomes invisible. 当我第一次单击显示按钮时，将显示按钮和缩放按钮显示出来。如果第一张图片不可见，则它变为可见，如果可见，则它不可见。 when I click on display button for the second time the same thing happens to picture 2 and this process repeats for all 12 pictures. 当我第二次单击显示按钮时，图片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>

Answer 1

It's hard to understand what you're trying to accomplish but I think I have an idea. 很难理解您要实现的目标，但我想我有一个主意。 Here's my solution just using vanilla JS, I put some comments in my code too so it kinda walks you through the process of how it works. 这是仅使用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" />

Hope this helps! 希望这可以帮助！

Answer 2

Apart from the syntax errors I commented about, there are a few aspects worth remarking: 除了我评论过的语法错误外，还有一些方面值得一提：

I personally think there is nothing wrong with mixing vanilla JS with jQuery (although I might get bashed in a few minutes just for saying that) but only (no offense) if you know what you are doing. 我个人认为将香草JS与jQuery混合没有任何问题（尽管我可能会在几分钟之内就这么说），但只有（没有冒犯性）知道您在做什么。 If you do this: 如果您这样做：
var x = $('#img1');

x will be a jQuery object, not a dom element, on which you cannot do x.style , to access the style property like that you must first access the actual dom element inside the jQuery object: x将是一个jQuery对象，而不是一个dom元素，您不能在其上执行x.style来访问style属性，就像您必须首先访问jQuery对象内部的实际dom元素：
x[0].style
In order to show each image one at a time and AFTER hiding them one at a time as well, you need to properly set count first and then get the corresponding image tag. 为了一次显示一个图像，然后一次隐藏一个图像，您需要先正确设置count ，然后获取相应的图像标签。
Don't know if "collapse" exists as a proper value for display so in my example I use "none" . 不知道"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>

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

问题描述

2 个解决方案

解决方案1
0 2018-04-17 22:24:37

解决方案2
0 2018-04-18 21:50:30

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

问题描述

2 个解决方案

解决方案1 0 2018-04-17 22:24:37

解决方案2 0 2018-04-18 21:50:30

解决方案1
0 2018-04-17 22:24:37

解决方案2
0 2018-04-18 21:50:30