royalSlider:如何使用类作为选择器删除幻灯片

Question

资源

我使用royalSlider作为插件.这是文档和API的快速链接.

在我的网站上,滑块可用作height: 100%; width: 100%全屏滑块.

内容结构

我网站的结构非常简单:我使用幻灯片作为封面,让我们调用它们.cover,每个幻灯片后面都有一个包含更多信息的幻灯片.让我们打电话给他们.sub.

Content Cover Nr. 1
  Subslide Content Nr. 1
Content Cover Nr. 2
  Subslide Content Nr. 2
Content Cover Nr. 3
  Subslide Content Nr. 3
Content Cover Nr. 4
  Subslide Content Nr. 4

如果更容易理解,您可以在此处查看实时网站.

---

在附加我的子幻灯片的函数内部,我在右侧创建三个按钮以向上滚动,向下滚动并关闭当前幻灯片.向下滚动效果很好.(在这里查看我的main.js文件,第177行)

问题

浏览器将使用选定的所有按钮绑定$(p.sl_button)到同一个子幻灯片,而不是将每个按钮绑定到其自己的父级.

难以解释,易于尝试.如果你,例如:

1. 开放下滑5号
2. 开放下滑2号
3. 滚动到Subslide Number 5
4. 单击关闭按钮(带红色背景的X)

系统"破裂".它不是关闭子级数5,而是关闭子级数2(这是最后一次,上面命名的函数被调用.

我该如何解决这个问题？

我用来绑定我的子幻灯片上的按钮的代码:

// Append Slides by ID and Database
function appendIt(num_id) {
    var $parid = num_id.parents('.rsContent').attr('id');
    var $sub_id = sliderInstance.currSlideId + 1;      
    // get current slide id & increase by 1
    // append html slide
    sliderInstance.appendSlide(eval($parid), $sub_id);
    sliderInstance.next();

    // close button on sub slides
    $('.scrolldown').on('click', function(){
        sliderInstance.next();
    });
    // Scroll Slide Up
    $('.scrollup').on('click', function(){
        sliderInstance.prev();
    });
    // Close Subslide
    $('.close').on('click', function(){
        $('#'+$parid+' p.sl_button').addClass('in');
        sliderInstance.prev();
        setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
    });
};

如果您需要更多信息来重新创建我的bug,请随时询问.我感谢有关此主题的任何帮助或提示.在此先感谢大家深入研究我的问题.

---

»royalSlider文档和API

»网站的实时版本

»我的Javascript/jQuery文件

Answer 1

我自己找到了一个适合我的解决方案：

当我在以下函数中绑定按钮时：

// Append Slides by ID and Database
function appendIt(num_id) {
    var $parid = num_id.parents('.rsContent').attr('id');
    var $sub_id = sliderInstance.currSlideId + 1;      
    // get current slide id & increase by 1
    // append html slide
    sliderInstance.appendSlide(eval($parid), $sub_id);
    sliderInstance.next();

    // close button on sub slides
    $('.scrolldown').on('click', function(){
        sliderInstance.next();
    });
    // Scroll Slide Up
    $('.scrollup').on('click', function(){
        sliderInstance.prev();
    });
    // Close Subslide
    $('.close').on('click', function(){
        $('#'+$parid+' p.sl_button').addClass('in');
        sliderInstance.prev();
        setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
    });
};

每次有人打开子幻灯片时，页面上的所有按钮都充当同一子幻灯片的选择器。为了解决这个问题，我使用了以下子ID幻灯片：

#sl1
#sl1_sub
#sl2
#sl2_sub

当每个子幻灯片开始使用相同的ID添加时，我创建了一个 var，它仅针对使用选择器与其父级结合的_sub按钮：classID

// Append Slides by ID and Database
    var $parid = num_id.parents('.rsContent').attr('id');
    var $sub_id = sliderInstance.currSlideId + 1;

    // THIS is the new line
    var $subtarget = $('#' + $parid + '_sub'); // 

    // added the var $subtarget to every button
    $subtarget.find('.scrolldown').on('click', function(){
        sliderInstance.next();
    });
    // added the var $subtarget to every button
    $subtarget.find('.scrollup').on('click', function(){
        sliderInstance.prev();
    });
    // added the var $subtarget to every button
    $subtarget.find('.close').on('click', function(){
        $('#'+$parid+' p.sl_button').addClass('in');
        sliderInstance.prev();
        setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
    });
};

感谢所有花时间思考我的问题并提供答案的人！