Home/ Questions/Q 680629
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T01:23:38+00:00

<html> <head> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js type=text/javascript></script> <script type=text/jscript> $(‘document’).ready(function (){ var clickNo=0; $(‘div#pics>img’).hide() $(‘div#pics>input’).click(function(event){ $(‘div#pics>img’)[0].show(‘slow’);

  • 0
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/jscript">
    $('document').ready(function (){
        var clickNo=0;
        $('div#pics>img').hide()
        $('div#pics>input').click(function(event){
            $('div#pics>img')[0].show('slow');
        })

    });
</script>
</head>
<body>
<div id="pics">
<input type="button" value="next" />
<--a bunch of img tags .I had to resort to this comment because the system won't 
   let me include the img tag in the code-->
</div>
</body>
</html>

I can’t understand why the line $('div#pics>img')[0].show('slow'); is not working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have several pieces of advice:

    1. If the images are meant to be hidden on page load, hide them with CSS not Javascript;

    2. There is little value in specifying a tag name and an ID (div@pics). Just specify the ID (#pics);

    3. The array notation ([0]) is shorthand for get(0). It returns a DOM element and not a jQuery object. The jQuery object is the one that has a show() method; and

    4. jQuery is up to 1.4.2; and

    5. I’m not sure exactly what you’re trying to do with your click() handler. The name “next” implies you want to cycle through them?

    Incorporating all that:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#pics img { display: none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/jscript">
$(function() {
  $("#pics > input").click(function(event) {
    var images = $("#pics img");
    var visible = images.filter(":visible");
    if (visible.length == 0) {
      images.eq(0).show("slow");
    } else {
      var index = images.index(visible[0]);
      visible.hide("slow");
      $(images[(index + 1) % images.length]).show("slow");
    }
  });
});
</script>
</head>
<body>
<div id="pics">
<input type="button" value="next" />
<--a bunch of img tags .I had to resort to this comment because the system won't 
   let me include the img tag in the code-->
</div>
</body>
</html>
    • 0