jquery幻灯片不会遍历dom

Question

我发现这个 Jquery 幻灯片 sn-p 非常适合我，只是它不会遍历 DOM。现在只有我文档中的第一个幻灯片可以工作。我已经搜索了一遍，我很确定我需要使用 .each() 以便它可以在我的文档中找到所有#slideframe DIV。不幸的是，我似乎无法正确使用它。任何有助于我的投资组合启动和运行的帮助都将是一个很大的帮助！

您可以在此处查看“工作”站点：LINK

这是我的 JQUERY

<script language="javascript">    $(document).ready(function () {
    var count = $('#slideframe').children().length;
    $("#total").text(count);
    // set display:none for all members of ".pic" class except the first
    var hidden = $('#slideframe').children();
    $('hidden:gt(0)').hide();

    // stores all matches for class="pic"
    var $slides = $('#slideframe').children();

    $slides.click(function () {

        // stores the currently-visible slide
        var $current = $(this);
        if ($current.is($slides.last())) {
            $("#current").text("1");
            $current.hide();
            $slides.first().show();
        }
        // else, hide current slide and show the next one
        else {
            $("#current").text($current.next().index()+1);
            $current.hide().next().show();
        }

    });
});</script>

这是我的 HTML：

<div class="projectcontainer">
<div id="slideframe">
            <video class="image" src="NEW/PHOTOS/AW17_FW_INSTA_LOCKUP_LO.mp4" type="video/mp4" autoplay loop></video>
            <img class="image" src="NEW/PHOTOS/AW17_LONDON_SQUARE.jpg" style="display: none;">
            <img class="image" src="NEW/PHOTOS/AW17_MILAN_SQUARE.jpg" style="display: none;">
            <img class="image" src="NEW/PHOTOS/AW17_NEWYORK_SQUARE.jpg" style="display: none;">
</div>


        <div class="imagetext">
            <div class="counter"><span id="current">1</span> / <span id="total">4</span></div>
            MAC Cosmetics AW17 Fashion Week Branding<br>
            ( Illustrations by <a href="culturesport.tv">culturesport.tv</a> )
        </div>

1 / 4 MAC Cosmetics AW17 时装周品牌推广
（插图来自culturesport.tv）

Answer 1

首先，每个 DOM 元素应该只使用一个 ID。因此，如果您想引用多个幻灯片框架元素，请考虑使用类标识符，例如以下示例：

<div class="slideframe">

（请注意，您还需要更新 #current 和 #total 元素，以便它们的 ID 也不会重复。）

然后，在 jQuery 中，您将按如下方式引用这些幻灯片：

$('.slideframe')

另外，就您的观点而言：您可能希望遍历两个幻灯片框，例如，对.last() 的调用将与正确的幻灯片框相关。

var $frames = $('.slideframe');
$frames.each(function() {
   var currentFrame = $(this);
   var currentSlides = currentFrame.children();
   currentSlides.click(function () {

        // stores the currently-visible slide
        var $current = $(this);
        if ($current.is(currentSlides.last())) {
            $(".current", currentFrame.next()).text("1"); // note this assumes you have set DOM element to use class="current"
            $current.hide();
            currentSlides.first().show();
        }
        // else, hide current slide and show the next one
        else {
            $(".current", currentFrame.next()).text($current.next().index()+1); // note this assumes you have set DOM element to use class="current"
            $current.hide().next().show();
        }

    });   
});

Answer 2

您不能多次使用 id。您目前在多个位置拥有 id="slideframe"。 jQuery 只能看到第一个实例。尝试将 slideframe 更改为类。