royalSlider：如何使用 class 作为选择器删除幻灯片

Question

资源

我正在使用 royalSlider as a plugin. Here is a quick link to the documentation & 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

如果更容易理解，可以查看live site right here.

在附加我的子幻灯片的函数中，我在右侧创建了三个按钮，用于向上滚动、向下滚动和关闭当前幻灯片。向下滚动效果很好。（查看我的 main.js 文件，第 177 行）

问题

浏览器将使用 $(p.sl_button) 选择的所有按钮绑定到同一张子幻灯片，而不是将每个按钮绑定到它自己的 parent.

很难解释，很容易尝试。例如，如果您：

打开 5 号子幻灯片
打开 2 号子幻灯片
滚动到 5 号子幻灯片
点击关闭按钮（红色背景的 X）

系统"breaks"。它不是关闭 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 ); 
    });
};

如果您需要更多信息来重现我的错误，请随时询问。感谢有关此主题的任何帮助或帮助。预先感谢大家深入研究我的问题。

» royalSlider Documentation & API

» Live Version of the website

» My Javascript / jQuery File

Answer 1

在你的代码中，逻辑是这样的：

原文：

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl2     | 2           |         |
| sl3     | 3           |         |
| sl4     | 4           |         |
+---------+-------------+---------+

然后尝试添加子幻灯片：

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl2     | 2           |         |
| sl3     | 3           |         |
| sl4     | 4           |         |
| sl4_sub | 5           | 4+1     |
+---------+-------------+---------+

然后尝试在第一张幻灯片上方添加另一张子幻灯片：

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl1_sub | 2           | 1+1     | Notice the currSlideId are always auto sort the id,
| sl2     | 2->3        |         | so the slides below sl1_sub are auto increment by 1.
| sl3     | 3->4        |         |
| sl4     | 4->5        |         |
| sl4_sub | 5->6        | 4+1     |
+---------+-------------+---------+

正在尝试删除第一张子幻灯片：

+---------+-------------+---------+
| slide   | currSlideId | $sub_id |
+---------+-------------+---------+
| sl0     | 0           |         |
| sl1     | 1           |         |
| sl1_sub | 2           | 1+1     | 
| sl2     | 3           |         | 
| sl3     | 4           |         |
| sl4_sub | 6->5        | 4+1     | It recorded $sub_id with value 4+1, so it removed the
+---------+-------------+---------+ sl4 slide.

所以你需要的是正确获取当前幻灯片，并将其删除。
这可能会帮助您获得正确的幻灯片 ID。每次触发 .close:

时，您应该获取当前幻灯片 ID

$subtarget.find('.close').on('click', function(){
    var $sub_id = sliderInstance.currSlideId; // this line should be added.
    $('#'+$parid+' p.sl_button').addClass('in');
    sliderInstance.prev();
    if ($parid == 'sl0') $skip_0=false;
    else if ($parid == 'sl1') $skip_1=false;
    else if ($parid == 'sl2') $skip_2=false;
    else if ($parid == 'sl3') $skip_3=false;
    else if ($parid == 'sl4') $skip_4=false;
    else if ($parid == 'sl5') $skip_5=false;
    else if ($parid == 'sl6') $skip_6=false;
    else if ($parid == 'sl7') $skip_7=false;
    else if ($parid == 'sl8') $skip_8=false;
    setTimeout( function(){sliderInstance.removeSlide($sub_id);}  , 600 ); 
});

Answer 2

使用..

// remove 5th slide:
sliderInstance.removeSlide(4);

参考：http://help.dimsemenov.com/kb/royalslider-javascript-api/dynamically-add-and-remove-slides

Answer 3

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

因为我在下面的函数中绑定了按钮：

// 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 添加 _sub 我创建了一个 var，它仅针对使用 class 选择器及其父级 [=13] 的按钮=]:

// 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 ); 
    });
};

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

royalSlider：如何使用 class 作为选择器删除幻灯片

royalSlider: How to remove a slide using a class as selector

html

javascript

css

jquery

royal-slider

资源

内容结构

问题