javascript - 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

分かりやすい場合は、ここでライブサイトを確認できます。

サブスライドを追加する関数内で、右側にスクロールアップ、スクロールダウン、および現在のスライドを閉じる 3 つのボタンを作成します。下にスクロールするとうまくいきます。(こちらのmain.jsファイルの 177 行目を確認してください)

問題

ブラウザーは、各ボタンを独自の親にバインドするのではなく、選択したすべての$(p.sl_button)ボタンを同じサブスライドにバインドします。

説明するのは難しく、試すのは簡単です。たとえば、次の場合：

サブスライド番号 5 を開く
サブスライド番号 2 を開く
サブスライド番号 5 までスクロールします
閉じるボタン（赤い背景の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 ); 
    });
};

私のバグを再現するためにさらに情報が必要な場合は、お気軽にお問い合わせください。このトピックに関する助けやヒントをいただければ幸いです。私の問題を掘り下げてくれたみんなに前もって感謝します。

» RoyalSlider のドキュメントと API

» ウェブサイトのライブバージョン

» 私の Javascript / jQuery ファイル

score 4 · Accepted Answer

自分に合った解決策を見つけました：

次の関数でボタンをバインドすると:

// 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 を作成しました。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 ); 
    });
};

私の質問について時間をかけて考え、答えを提供してくれた皆さんに感謝します!

score 4 · Accepted Answer

コードでは、ロジックは次のようになります。

オリジナル：

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

score 1 · Accepted Answer

使用する..

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

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

javascript - RoyalSlider: クラスをセレクターとして使用してスライドを削除する方法

資力

コンテンツ構造

問題

3 に答える 3

Related

Reference