スライダーの[次へ]ボタンと[前へ]ボタンに、それぞれ次の画像と前の画像のキャプションを表示させようとしています。[次へ]ボタンにカーソルを合わせると、スライダーの次の画像のキャプションが表示されます。前のボタンと同じです。
AdvancedCustomフィールドのgalleryフィールドで作成されたスライダーがあります。同じページに複数のスライダーがあり、すべて同じマークアップを使用しています。唯一の違いは、背景画像と各画像のキャプションです。マークアップは以下で簡略化されています。1ページで以下のコードが3〜4回繰り返されることを想像してください（ここでも、スライダーの各反復で異なるのは背景画像とキャプションだけです）。
<div class='theslider'>
<div class="controls">
<button class="prev"></button>
<button class="next"></button>
</div>
<div class="the-slides">
<ul>
<li><div class='slide' style="background-image...">
<span>item caption 1</span>
</li>
<li><div class='slide' style="background-image...">
<span>item caption 2</span>
</li>
<li><div class='slide' style="background-image...">
<span>item caption 3</span>
</li>
</ul>
</div>
jQueryの.clone関数と.html関数を使用して、キャプションをスライドli要素からスライダーボタンに移動しようとしています。
スライダーの動作方法では、現在の画像は常に最初のli要素です。したがって、「次へ」ボタンには「li：nth-child（2）」のキャプションを付け、「前へ」ボタンには「li：last-child」のキャプションを付ける必要があります。
私は以下でいくらかの進歩を得ることができました：
var $thecaption = jQuery('li:nth-child(2) span');
var $button = jQuery($thecaption).closest('.theslider').find('button.next');
var $nextcaption = jQuery($thecaption).clone();
jQuery($button).html($nextcaption);
しかし、最終的な結果は、ページ上のすべてのスライダーからのキャプションが付いた[次へ]ボタンです。
<button class="next">
<span>caption 2</span>
<span>caption 2</span>
<span>caption 2</span>
</button>
ターゲットの[次へ]ボタンと同じ親要素「.slider」を共有するキャプションのみがそのボタンに移動するように指定するにはどうすればよいですか？
どんな助けでも大歓迎です。前もって感謝します。
私はそれを考え出した。$ buttonと$ thecaptionが同じスライダーの一部であることを確認するために、共通の祖先として使用するために間違った要素を使用していました。
*注：スライダーボタンは、クラス「control_next」の別のスパンにラップされています。
<span class="control_next">
<button class="next"></button>
</span>
ボタン「control_next」要素をトリガーとして使用して、次のことができました...
A：祖先に沿って上に移動し、最も近い親「.theslider」を見つけます。次に、その「.theslider」親の子であるキャプションを見つけます。これは、 '。slides-list li：nth-child（2）です。スパン'。
var $thecaption = jQuery(this).closest('.theslider').find('.slides-list li:nth-child(2) span');
B：同じ原点（トリガー）を使用して、キャプションが配置されるスパンを見つけます
var $button = jQuery(this).find('.btn-caption.right');
C：キャプションのクローンを作成し、配置する変数として設定します。
var $nextcaption = jQuery($thecaption).clone();
D：各スライドで実行します。（スライダーはli要素をシフトし、スライドが循環するときに最後のliスライドを上部に追加します。これに基づくスライダーコード）
以下に作業コードを示します。
jQuery(document).ready(function(){
jQuery('.control_next').mouseenter(function() {
var $thecaption = jQuery(this).closest('.theslider').find('.slides-list li:nth-child(2) span');
var $button = jQuery(this).find('.btn-caption.right');
var $nextcaption = jQuery($thecaption).clone();
jQuery($targetbutton).html($nextcaption);
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加