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

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 。

请参阅下面的代码片段进行演示:
在代码片段中，我将 $(this).find('a').attr('href') 更改为 $(this).find('a').html() ，基于您提供的 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/