Question

我的PHP代码：

for($i = 1; $i < 22; $i++) {

    echo '<div id="number" style="display:none">'.$i.'</div>';

}

我的jquery代码：

$('#number').each(function() {

    $(this).slideDown("slow");  

})

这里有什么问题？当所有数字一个接一个地出现时，我想实现效果。我的意思是，首先滑下1号，然后是2号，依此类推。现在只滑下1号并且在他之后没有任何事情发生，尽管我每个都使用jquery。谢谢。

Answer 1

您的代码中可能只有一个id="number"。 ID是唯一的。请改用class="number"。

那是：

您的PHP代码：

for ($i = 1; $i < 22; $i++) {
    echo '<div class="number" style="display:none">'.$i.'</div>';
}

你的JS代码：

$('.number').each(function() {
    $(this).slideDown("slow");  
});

Answer 2

ID应该是唯一的。请改用CSS类（和相应的选择器“.number”）。

一旦你让他们全部显示，我猜他们会立即出现。为了解决这个问题，您可能需要创建一个在下一个数字中滑动的函数，并设置超时以再次调用自身。像，

function slideNext()
{
    $(".number:first").each(function() {
        $(this).slideDown("slow").removeClass("number");
        window.setTimeout(slideNext, 1000);
    });
}

$(document).ready(slideNext);

注意，这没有经过测试，我绝不是一个jQuery大师。

Answer 3

首先，您的PHP需要更改，它会呈现无效的HTML，因此：

for($i = 1; $i < 22; $i++) {
  echo '<div id="number" style="display:none">'.$i.'</div>';
}

需要像这样（或者如果不需要的话，完全移除id）：

for($i = 1; $i < 22; $i++) {
  echo '<div id="number'.$i.'" class="number" style="display:none">'.$i.'</div>';
}

然后你的jQuery应该是这样的：

$('.number').each(function(i) {
  $(this).delay(600*i).slideDown("slow");  
});

You can view a demo here

这将显示第一个，第二个600毫秒后（速度“慢”= 600毫秒），第三个在1200毫秒后等，所以它们将一个接一个地发生。我们所做的只是使用.delay()并将集合中元素的索引传递给动画持续时间，因此它们按顺序发生。

Answer 4

您正在创建具有相同id属性的多个元素。根据HTML规范，这是非法的，并且阻止您的jQuery选择器能够确定您尝试访问哪个元素。请尝试使用类属性，并使用$('.number')

Answer 5

您不能拥有多个具有相同ID的元素。你需要使用一个类：

PHP for（$ i = 1; $ i＆lt; 22; $ i ++）{

   echo '<div class="number" style="display:none">'.$i.'</div>';
}

Jquery的：

$('.number').each(function() {

    $(this).slideDown("slow");  

})

Answer 6

使用类而不是id id must be unique。我已经在课堂上尝试了它，但它确实有用。

PHP：

for($i = 1; $i < 22; $i++) {

    echo '<div class="number" style="display:none">'.$i.'</div>';

}

jQuery的：

$('.number').each(function() {

    $(this).slideDown("slow");  

})

很酷的效果！祝你好运！

Answer 7

嘿 - 这基本上不起作用，因为id必须是唯一的，因此代码不会起作用。如果您使用的是类而不是id（即<div class="number"），它可能会起作用。

还没有尝试过 - 所以只是一个想法......

吉姆

Answer 8

根据规范，确实应该只有一个具有给定ID的元素，但您可以通过以下方式克服它：

$( "*[id='number']").each(function() {

        $(this).slideDown("slow");  

  });

Answer 9

嘿，因为延迟，试试这个：

$('.number').each(function(i) {
  setTimout($(this).slideDown("slow"), i*250);  
});

你永远不知道......

如何用Jquery各自制作这个技巧？

9 个答案: