14

资源

我正在使用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. 打开第二张幻灯片
  3. 滚动到第 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 ); 
    });
};

如果您需要更多信息来重新创建我的错误，请随时询问。我感谢有关此主题的任何帮助或帮助。在此先感谢所有研究我的问题的人。

» 皇家滑块文档和 API

» 网站的实时版本

» 我的 Javascript / jQuery 文件

4

3 回答 3

4

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

原来的：

+---------+-------------+---------+
| 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。每次触发时，您都应该获得当前的幻灯片 ID .close：

$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 ); 
});
于 2015-07-06T07:12:49.040 回答
4

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

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

// 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选择器与其父级组合的按钮ID：

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

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

于 2015-07-06T08:18:35.930 回答
1

利用..

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

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

于 2015-07-06T07:16:18.940 回答