我有一个图像轮播,其中有几张幻灯片,每张幻灯片都有一个标题和一个按钮。
每个按钮 (.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
样式。
感谢您提供的任何帮助!
最佳答案
使用 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>
关于javascript - 加载网站时如何为轮播的每张幻灯片重复相同的功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44638295/