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元素。因此，＆＃34; NEXT＆＃34;按钮应该有＆＃34; li：nth-child（2）＆＃34; 并且＆＃34; PREVIOUS＆＃34;按钮应该有＆＃34; li：last-child＆＃34;的标题。

我已经能够在以下方面取得一些进展：

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>

如何指定只有共享相同父元素的标题＆＃34; .slider＆＃34;当目标Next Button被移动到那个按钮？

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

Answer 1

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

*注意：滑块按钮包含在另一个带有＆＃34; control_next＆＃34;类的范围内。

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

使用按钮＆＃34; control_next＆＃34;元素作为触发器我能够......

A：沿着它的祖先向上移动，找到最近的父母＆＃34; .theslider＆＃34;然后从那里找到那个＆＃34; .theslider＆＃34;的孩子的标题。父母，这是＆＃39; .slides-list li：nth-child（2）span＆＃39;。

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

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

1 个答案: