Question

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

我无法理解为什么行$('div#pics>img')[0].show('slow');无效。

Answer 1

这会获取本机DOM元素，而不是jQuery对象（没有.show()函数），你想要的是:first，这样你就得到了jQuery对象：

$('div#pics>img:first').show('slow');

或者，以您当前的格式，获得第一个匹配：

$('div#pics>img:eq(0)').show('slow');
//Or..
$('div#pics>img').eq(0).show('slow');

我认为这个数字会改变/攀升，所以最后一个选项似乎是你个案中最好的方法。

Answer 2

我有几条建议：

如果要在页面加载时隐藏图像，请使用CSS而不是Javascript隐藏它们;
指定标签名称和ID（div@pics）没什么价值。只需指定ID（#pics）;
数组表示法（[0]）是get(0)的简写。它返回一个DOM元素而不是一个jQuery对象。 jQuery对象是具有show()方法的对象;以及
jQuery高达1.4.2;以及
我不确定您要对click()处理程序做什么。名称“下一个”意味着你想要循环它们吗？

合并所有：

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

jQuery数组的问题

2 个答案: