將下一個/上一個圖像標題添加到滑塊導航按鈕

Question

我試圖使滑塊中的NEXT和PREVIOUS按鈕分別顯示下一張和上一張圖片的標題。 應該是，當您將鼠標懸停在NEXT按鈕上時，將顯示滑塊中下一幅圖像的標題。 同上一個按鈕。

我有一個使用“高級自定義”字段中的“圖庫”字段創建的滑塊。 我在同一頁面上有多個滑塊，都使用相同的標記。 唯一的區別是背景圖像以及每個圖像的標題。 標記在下面進行了簡化，在一頁上想象下面代碼的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元素。 因此，“ NEXT”按鈕的標題應為“ li：nth-​​child（2）”，“ PREVIOUS”按鈕的標題應為“ 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);

但是最終結果是一個NEXT Button，帶有頁面上每個滑塊的標題。

<button class="next">
    <span>caption 2</span>
    <span>caption 2</span>
    <span>caption 2</span>
</button>

如何指定僅將與目標“下一個按鈕”共享相同父元素“ .slider”的標題移到該按鈕？

任何幫助是極大的贊賞。 提前致謝。

Answer 1

我想到了。 我使用了錯誤的元素作為通用祖先，以確保$ button和$ thecaption是同一滑塊的一部分。

*注意：滑塊按鈕使用“ control_next”類包裝在另一個范圍中。

<span class="control_next">
   <button class="next"></button>
</span>

使用按鈕“ control_next”元素作為觸發器，我能夠...

答：沿着其祖先向上移動，找到最接近的父代“ .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);
});
});