Question

我有一个小的测试脚本，应该在按钮点击时隐藏图像，但它只隐藏第一个图像（3个）然后停止。

代码在

之下

HTML


    <button id="hide">Make Images Disappear</button>
    <button id="show">Make Images Appear</button>
    <img class="img" src="img/puppy1.jpeg">
    <img class="img" src="img/puppy2.jpeg">
    <img class="img" src="img/puppy3.jpeg">

jQuery

    $(function() {
   $('#hide').on('click',  function() {
     $('img').first().hide('slow'), function hideNextOne() {
       $(this).next('img').hide('slow', hideNextOne);
     }
});

控制台中没有错误，只是隐藏第一个图像然后停止，尽管调用了hideNextOne函数。 html中没有id只是相同的图像元素。

...

Answer 1

你说你在控制台中没有看到任何错误，但是当我尝试你的代码时，我明白得到了这个：

Error: {
  "message": "Uncaught SyntaxError: Unexpected end of input",
  "filename": "https://stacksnippets.net/js",
  "lineno": 23,
  "colno": 3
}

您只需要修复语法。正确地使用缩进格式化代码会使这一点变得更加明显。

您没有正确关闭.on()或.hide()方法调用，并且您没有正确地将回调函数hideNextOne作为.hide()方法的第二个参数传递。< / p>

＆＃13;

$(function() {

   $('#hide').on('click',  function() {

     // The callback function for .hide() needs to be passed as a parameter
     // to the .hide() method, not supplied after it
     $('img').first().hide('slow', function hideNextOne() {
       $(this).next('img').hide('slow', hideNextOne);
     });  // <-- Closing of the .hide() call was not correct!
     
   });  // <-- Closing of the .on() call was missing!

});

＆＃13;

img { width:50px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<img src="https://thumbs-prod.si-cdn.com/iF96tb3cgn8IR9aDBJBd7-hDnBQ=/800x600/filters:no_upscale()/https://public-media.smithsonianmag.com/filer/Design-Decoded-Smiley-Face-631%20copy.jpg">
<img src="https://i.pinimg.com/736x/43/7b/9b/437b9bbf3fde6d6a331b52bf6c422850--sad-faces-happy-faces.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png">
<img src="http://www.publicdomainpictures.net/pictures/130000/velka/clip-art-smiley-face.jpg">

＆＃13;

Answer 2

您遇到了一些格式错误导致脚本失败。你可以这样做，我觉得它也更容易阅读。

function hideNextOne() {
  $(this).next('img').hide('slow', hideNextOne);
}

$('#hide').on('click', function() {
  $('img').first().hide('slow', hideNextOne);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img alt="image1"/>
<img alt="image2"/>
<img alt="image3"/>
<button id="hide">hide</button>

后续图像不隐藏jQuery

2 个答案: