Question

我已经构建了一个JQuery CSS3图库。问题是下面代码中的下一个函数不是工作问题。

function gallery() {

        var islide = $('.cornerimg:visible');
        $(islide).removeClass('cornerimgfocus');
        $(islide).next().addClass('cornerimgfocus');
        setTimeout(function() {
            gallery()
        },4000);
}
$(window).load(function() {
    $( '.cornerimg' ).first().addClass('cornerimgfocus');
    setTimeout(function() {
            gallery()
        },4000);
});

下一个功能是对所有下一个元素进行操作，而不仅仅是下一个元素。结果是所有跟随第一个带有类.cornerimg的元素立刻变得可见。

HTML

<div class="imageitem">    
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00764s-968x400.jpg);"></div>
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00762s-968x400.jpg);"></div>
    <div class="cornerimg" style="background-image:url(http://www.golfbrowser.com/wp-content/uploads/2011/05/DSC00759s-968x400.jpg);"></div>
</div>

有什么想法吗？

非凡

Answer 1

.next()选择集合中每个元素后的下一个元素。

如果该组具有 n 元素，.next()也将具有 n 元素。

您可能需要.first().next()或.eq(1)。

Answer 2

为什么不选择.cornerimgfocus。就我从您的代码中看到的而言，这是应该/可见的幻灯片。 :visible选择器似乎选择了所有div。

function gallery() {

        var islide = $('.cornerimgfocus');
        islide.removeClass('cornerimgfocus');
        islide.next().addClass('cornerimgfocus');
        setTimeout(function() {
            gallery()
        },4000);
}

Answer 3

答案在文档中：“获取匹配元素集中每个元素的紧随其后的兄弟。” jquery next()

你的初始选择器正在返回每个cornerimg div，所以接着返回每个的下一个元素。

尝试执行此操作以获取第一个元素，然后像以前一样继续执行其余代码（但是像SLaks所说的那样删除islide周围的$（））：

var islide = $('.cornerimg:visible').eq(0); // or .first()

Answer 4

来自API documentation：Get the immediately following sibling of each element in the set of matched elements.所以它只获得紧随其后的元素（而不是nextAll）。问题是$(islide)包含很多相邻元素，因此$(islide).next()将包含紧跟其中一个元素的所有元素（即$(islide)的所有元素，除了第一个元素加上以下元素$(islide)）的最后一个元素。根据您的需要，您可以尝试使用$(islide).last()或$(islide).next(':not(.cornerimg)')。

Answer 5

你需要使用图像索引，正如我在你的另一个问题的答案中所说的那样

JQuery each function pause between non functional

Answer 6

我认为这就是你想要的

 function gallery(elem) {

    $(elem).removeClass('cornerimgfocus');
    $(elem).next().addClass('cornerimgfocus');
    setTimeout(function() {
        if($(elem).next().length!=0)
        gallery($(elem).next().first());
    },4000);
}
$(window).load(function() {
$( '.cornerimg' ).first().addClass('cornerimgfocus');
setTimeout(function() {
        gallery($('.cornerimg:visible').first())
    },4000);
});

JQuery .next（）函数使所有下一个元素不是一个

6 个答案: