如何在加载站点时对旋转木马的每一张幻灯片重复相同的功能？

Question

我有一个图像旋转木马，有几张幻灯片，每个幻灯片都有一个标题和一个按钮。

每个按钮(.meta-description)链接到不同的页面，我希望该幻灯片的相应标题(.meta-title)链接到按钮指向的相同页面。(例如幻灯片1/标题1/链接1，幻灯片2/标题2/链接2，等等)。

我成功地完成了这一过程的一部分：

$(document).ready(function() {
  var a_href = $('.meta-description a').attr('href');
  $('.meta-title').wrapInner('<a href="'+a_href+'" />');
});

但问题是，现在所有幻灯片标题链接到第一个幻灯片按钮(链接1)的href。

我如何重复每个幻灯片的功能，使标题匹配其相应的按钮href？

更新:这是我正在使用的HTML：

<div class="carousel">
    <div class="slide">
      <div class="image"></div>
      <div class="meta">
         <div class="meta-title">Title 1</div>
         <div class="meta-description">
            <a>Link 1</a>
         </div>
      </div>
    </div>
    <div class="slide">
      <div class="image"></div>
      <div class="meta">
         <div class="meta-title">Title 2</div>
         <div class="meta-description">
            <a>Link 2</a>
         </div>
      </div>
    </div>
    <div class="slide">
      <div class="image"></div>
      <div class="meta">
         <div class="meta-title">Title 3</div>
         <div class="meta-description">
            <a>Link 3</a>
         </div>
      </div>
    </div>
</div>

所有幻灯片都使用相同的类，标题和描述也是如此，因此没有任何id可以将它们与相应的标题和链接“匹配”。唯一的区别是一个新的类(.active-slide)被附加到活动幻灯片中，而其他类则得到一个额外的visibility: hidden样式。

感谢您提供的帮助！

Answer 1

使用jQuery的.each，它将迭代匹配选择器的每个元素：

$(document).ready(function() {
  $('.meta-description').each(function() {
    var href = $(this).find('a').attr('href');
    $(this).prev('.meta-title').wrapInner('<a href="'+href+'"></a>');
  });
});

• 在函数内部，使用$(this)引用当前元素。
• 首先，使用$(this).find('a')...访问a标记在当前元素中。
• 然后使用$(this).prev('.meta-title')...到达.meta-title，即当前元素的前同级。

查看下面的代码片段以获得演示：

在代码片段中，我根据您提供的$(this).find('a').attr('href')将$(this).find('a').html()更改为$(this).find('a').html()。

​

$(document).ready(function() {
  $('.meta-description').each(function() {
    var href = $(this).find('a').html();
    $(this).prev('.meta-title').wrapInner('<a href="'+href+'"></a>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="carousel">
  <div class="slide">
    <div class="image"></div>
    <div class="meta">
      <div class="meta-title">Title 1</div>
      <div class="meta-description">
        <a>Link 1</a>
      </div>
    </div>
  </div>
  <div class="slide">
    <div class="image"></div>
    <div class="meta">
      <div class="meta-title">Title 2</div>
      <div class="meta-description">
        <a>Link 2</a>
      </div>
    </div>
  </div>
  <div class="slide">
    <div class="image"></div>
    <div class="meta">
      <div class="meta-title">Title 3</div>
      <div class="meta-description">
        <a>Link 3</a>
      </div>
    </div>
  </div>
</div>

小提琴手：https://jsfiddle.net/a79zwds2/

​