Jquery 使用多个滑块获取当前幻灯片和总幻灯片

我正在使用fullpage.js制作多个水平滑块。基本上，您可以滚动到每个滑块，然后在每个部分内水平滑动。我要做的是显示每个部分的当前幻灯片/幻灯片总数。我遇到的问题是，因为它们都有相同的类，所以它得到的是整个页面的总数，而不是每个部分的总数，而且当前幻灯片不会改变，因为它从所有幻灯片中获得“活动”类

HTML

---

然后，您需要为每个部分而不是整个页面运行此功能。
有点像这样：

$('.section').each(function(){
    var section = $(this),
        sectionSlides = section.find('.slide'),
        totalItems = sectionSlides.length,
        currentIndex = sectionSlides.filter('.active').index() + 1,
        numContainer = section.find('.num'); //assuming you have numContainers in every section

    numContainer.html(currentIndex + '/' + totalItems);
});

编辑： 如果要多次运行此功能（更新幻灯片更改每个部分中的当前活动索引）。每次幻灯片更改时运行此功能。代码可能如下所示：

var sections = $('.section');

updateCurrentIndex(); //on document.ready and on each slidechange

function updateCurrentIndex(){
    sections.each(function(){
        var section = $(this),
            sectionSlides = section.find('.slide'),
            totalItems = sectionSlides.length,
            currentIndex = sectionSlides.filter('.active').index() + 1,
            numContainer = section.find('.num'); //assuming you have numContainers in every section

        numContainer.html(currentIndex + '/' + totalItems);
    });
}

---

但是请注意，您可能希望将几个部分从这个函数中移开（例如，项目总数，因为它没有改变，以及其他一些东西），简单地说，这个函数更多的是一个概念，它需要一些重构，以便准备生产）抱歉

这里有一把小提琴给您，以及运行正常的jquery

我对我的答案做了一个相当大的编辑，以包含在事件上运行的功能，为此，我刚刚在一个部分上使用了“单击”，显然，您希望为您的事件更改此选项。我还添加了当前幻灯片索引的警报，以便您可以看到它正在工作

要使用，只需使用要更新计数器的部分的索引（从0开始）调用slideCounts（）函数。each循环在documentready上添加计数器

小提琴：

jQuery—您希望循环浏览所有部分，计算部分中的幻灯片数，然后获取活动幻灯片。然后输出每个部分的活动幻灯片/幻灯片总数

$('.section').each(function(i){
    slideCounts(i);
});

$('.section').on('click',function(){
    var i = $(this).index();
    slideCounts(i);
});


function slideCounts(i){
    var elm = $('.section').eq(i);
    var total = elm.find('.slide').length;
    var current = elm.find('.active').index();
    current++;
    elm.find('.num').html(''+current+'/'+total+'');
    alert(current);  //remove this alert

}

我还对您的标记做了一些修改，以使示例能够工作

<div class="section" id="section1" >
    <div class="slide"></div>
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>
<div class="section" id="section2" >
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide active"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>
<div class="section" id="section3" >
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>

id必须是唯一的。所有幻灯片id？？？@Packy是的，DOM中的所有id属性都必须是唯一的。仍然不确定如何将总幻灯片限制为每个部分而不是整个部分的总幻灯片page@Packy见下面我的答案。它不会直接帮助您获取全部/当前幻灯片，但它会帮助清理DOM并避免将来出现问题。谢谢，我希望有一种方法可以避免这么多功能，但我想不会。这是得到幻灯片总数现在罚款，但不更新当前幻灯片（总是说1/4）不知道为什么。。。活动幻灯片可能是第一张？）我用@guid的小提琴检查了我的代码。效果也很好，或者你想在幻灯片更改时更新当前幻灯片的编号？我想在幻灯片更改时更新当前幻灯片有人解决了这个问题吗？我真的很感兴趣！我尝试了这个jsfiddle.net/skip405/168xofn3/3，它工作得很好，唯一的问题是它不会更新幻灯片上的数字。

$('.section').each(function(i){
    slideCounts(i);
});

$('.section').on('click',function(){
    var i = $(this).index();
    slideCounts(i);
});


function slideCounts(i){
    var elm = $('.section').eq(i);
    var total = elm.find('.slide').length;
    var current = elm.find('.active').index();
    current++;
    elm.find('.num').html(''+current+'/'+total+'');
    alert(current);  //remove this alert

}

<div class="section" id="section1" >
    <div class="slide"></div>
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>
<div class="section" id="section2" >
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide active"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>
<div class="section" id="section3" >
    <div class="slide active"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>

    <div class="slideContent">
        <div class="num"></div>
    </div>
</div>