加载网站时如何为轮播的每张幻灯片重复相同的功能？

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+'" />');
});

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

如何为每张幻灯片重复该功能，以使标题与其对应的按钮 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 标签inside the current element。
• 然后使用$(this).prev('.meta-title')... 到达.meta-title，即preceding sibling of the current element。

请参阅下面的代码 sn-p 以获取演示：
在代码 sn-p 中，我根据您提供的 HTML 将 $(this).find('a').attr('href') 更改为 $(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>

jsfiddle：https://jsfiddle.net/a79zwds2/