动态生成的幻灯片控件答案

【问题标题】：dynamically generated slideshows controls动态生成的幻灯片控件
【发布时间】：2019-05-02 20:29:53
【问题描述】：

我正在制作一个作品集页面，每页包含 X 个项目。每个项目都有自己的滑块。（jQuery 循环插件）项目条目来自数据库。

我已经为滑块添加了控件（播放/暂停/下一个/上一个）

$('.contentimage').cycle({
    next:   '.nextIco',
    prev:   '.prevIco'
});
$('.playIco').click(function() { 
    $('.contentimage').cycle('resume'); 
});
$('.pauseIco').click(function() { 
    $('.contentimage').cycle('pause');
});

问题是：例如，任何“下一步按钮”都控制页面上的每个幻灯片。

我现在的方法是通过 php 生成 js 代码。

但也许你们中的任何人都有更好的主意。在js端做。

【问题讨论】：

标签： javascript jquery jquery-cycle

【解决方案1】：

问题在于：例如，任何“下一步按钮”都控制着每个页面上的幻灯片。

这是因为您当前的代码创建了一个事件侦听器设置，其中任何“下一个”或“上一个”按钮触发每个幻灯片做出反应。您需要一种方法来明确地将每组下一个/上一个按钮与其各自的幻灯片相关联。一种方法是为每个幻灯片按钮集生成唯一的 data- 属性值，并使用 JavaScript 将两者联系起来：

$('.nextIco').click(function(e) {
    var sid = $(e.currentTarget).attr('data-slideshow-id');
    $('.contentimage[data-slideshow-id="' + sid + '"]').cycle('next');
});

但是，更好的方法是使用它们在 DOM 树中的相对位置将每个幻灯片与其对应的按钮相关联（假设在您的 HTML 中，您的每个幻灯片都被某个容器元素封装）：

<div class="slideshow-wrapper">
    <div class="prevIco"></div>
    <div class="slides-wrapper">
        <!-- Slideshow content/slides here ... -->
    </div>
    <div class="nextIco"></div>
</div>

您的 JavaScript 可能如下所示：

$(document).ready(function() {
    $('.prevIco .nextIco').on('click', function(e) {
        var button = $(e.currentTarget);
        var action = (button.hasClass('.prevIcon')) ? 'prev' : 'next';
        button.siblings('.slides-wrapper').cycle(action);
    });
});

这是 Mike Alsup 网站上的相关演示： http://jquery.malsup.com/cycle/prevnext.html

【讨论】：