Question

我有一组链接的图像，我想每隔3秒循环一次，但一次只显示一个：

# some django template code:
<div id="featured-prints" class="featured-promo">
    {% for p in promo_prints %}
    <a href="{% url 'print_order_with' p.id %}">
        <img class="featured-print" src="{{ MEDIA_URL }}{{ p.id }}_{{ THUMBNAIL_SIZE }}.png" alt="{{ p.body }}" />
    </a>
    {% endfor %}
</div>

# the JS to cycle through:

$(function(){
    $('.featured-promo a:gt(0)').hide();
    setInterval(function(){
        $('.featured-promo :first-child')
        .hide()
        .next('a')
        .fadeIn(2000)
        .end()
        .appendTo('.featured-promo');
}, 1000);

我最近在img周围添加了<a>，现在Javascript无法正常工作;它没有fadeIn()下一个链接的图像。我尝试了几种变体，包括传递＆＃34; a＆＃34;到next()和＆＃34; img＆＃34;，但似乎没有任何效果。我还尝试将parent()链接到hide()函数，仍然没有骰子。

任何提示？

Answer 1

尝试更改

$('.featured-promo :first-child')

为：

$('.featured-promo > :first-child')

如果没有>，它会降低到每个级别。因此，它会找到.featured-promo的第一个孩子（第一个a），以及每个a的第一个孩子（每个img）。它隐藏了所有这些，然后只在下一个a中淡出。 img标签保持隐藏状态，因为任何东西都不会消失。

选择器中的

>意味着只是将下一部分与直接子项匹配，而不是所有后代。

Answer 2

错误在那里

$(function(){
  $('.featured-promo a:gt(0)').hide();
   setInterval(function(){
     $('.featured-promo :first-child')// here
     .hide()
     .next('a')
     .fadeIn(2000)
     .end()
     .appendTo('.featured-promo');// no need to append as the for loop is already appending the anchors to the featured-promo.
   }, 1000);
)};

您正在呼叫.next('a')第一个孩子的.featured-promo，该孩子不是.featured-promo的兄弟，而是其中的孩子。 elementA.next()用于获取兄弟（元素A之后的元素，即元素B）

获取其他a s＆＃39;你应该写这样的

$(function(){
  var index = 0;
  var total_a = $('.featured-promo a').length;
   setInterval(function(){
     $('.featured-promo a:gt(' + index + ')')
     .hide()
     .next('a')
     .fadeIn(2000);
     index = (index < total_a) ? index + 1 : 0;// will increment if number of a is greater than index else 0 and continue like a slider..
   }, 2000);// better use 2000 ms as you're using 2000ms in the `fadeIn()`
 });

Answer 3

$(function(){
    $('.featured-promo a:gt(0)').hide();
    setInterval(function(){
    $('.featured-promo :first-child')
    .hide()
    .find('a')
    .fadeIn(2000)
    .end()
    .appendTo('.featured-promo');
}, 1000);

尝试查找而不是下一步

Answer 4

在hide（）之后使用end（）：

$('.featured-promo :first-child')
        .hide()
        .end()
        .next('a')
        .fadeIn(2000)
        .end()
        .appendTo('.featured-promo');

Answer 5

试试这个：

$(function(){
    $('.featured-promo a:gt(0)').hide();
    setInterval(function(){
        $('.featured-promo').children('a .featured-print').eq(1).parent()
        .hide()
        .next('a')
        .fadeIn(2000)
        .end()
        .appendTo('.featured-prints');
}, 1000);

jQuery next（）没有按预期工作

5 个答案: