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

【问题标题】：Add next / prev image caption to slider navigation buttons将下一个/上一个图像标题添加到滑块导航按钮
【发布时间】：2015-07-18 07:03:10
【问题描述】：

我正在尝试让滑块中的 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)” 并且“上一个”按钮应该有来自“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>

如何指定只有与目标 Next Button 共享相同父元素“.slider”的标题才移动到该按钮？

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

【问题讨论】：

标签： jquery slider html-lists parent-child advanced-custom-fields

【解决方案1】：

我想通了。我使用了错误的元素作为共同祖先来确保 $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 幻灯片附加到顶部，依此类推，幻灯片循环播放：基于 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);
});
});

【讨论】：