将下一个/上一个图像标题添加到滑块导航按钮

Question

我试图让滑块中的下一张和上一张按钮分别显示下一张和上一张图片的标题。应该是，当您将鼠标悬停在 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 class="next">
    <span>caption 2</span>
    <span>caption 2</span>
    <span>caption 2</span>
</button>

如何指定仅将与目标下一个按钮共享相同 parent 元素“.slider”的标题移动到该按钮？

非常感谢任何帮助。提前致谢。

Answer 1

我明白了。我使用错误的元素作为共同祖先来确保 $button 和 $thecaption 是同一滑块的一部分。

*注意：滑块按钮用 class "control_next" 包裹在另一个范围内。

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

使用按钮 "control_next" 元素作为触发器我能够...

A: 沿着它的祖先向上移动找到最近的 parent “.theslider”，然后从那里找到标题，即那个“.theslider”的 child parent, 即 '.slides-list li:nth-child(2) span'.

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 幻灯片附加到顶部等等，因为幻灯片循环通过：滑块代码基于 this）

下面是工作代码：

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

将下一个/上一个图像标题添加到滑块导航按钮

Add next / prev image caption to slider navigation buttons

jquery

slider

parent-child

html-lists

advanced-custom-fields