Question

我在滑块上添加了一些额外的功能，基本上可以使标题可点击，因此它链接到与滑块图像相同的页面。我设法使用jQuery，但我不知道如何推广，所以它适用于任意数量的幻灯片。以下是我用于两张幻灯片的代码：

jQuery(document).ready(function($) {
    $(".caption-wrap:eq(0)").append("<a href=\""+$("ul[class=\"slides\"] > li > a:eq(0)").attr("href")+"\"><span class=\"clickable\"></span></a>");
    $(".caption-wrap:eq(1)").append("<a href=\""+$("ul[class=\"slides\"] > li > a:eq(1)").attr("href")+"\"><span class=\"clickable\"></span></a>");
});

<ul class="slides">
    <li>
        <a href="test1">...</a>
        <div class="caption-wrap">...</div>
    </li>
    <li>
        <a href="test2">...</a>
        <div class="caption-wrap">...</div>
    </li>
</ul>

我想附加一个带有“caption-wrap”div的相应链接的span。

这可能是一个简单的问题，但我对jQuery相对较新。任何帮助，将不胜感激。谢谢！

Answer 1

您可以使用类似

的内容

var $slides = $('ul.slides > li > a');
$(".caption-wrap").append(function(idx) {
  return '<a href="' + $slides.eq(idx).attr("href") + '"><span class="clickable"></span></a>';
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="slides">
  <li>
    <a href="test1">...</a>
    <div class="caption-wrap">...</div>
  </li>
  <li>
    <a href="test2">...</a>
    <div class="caption-wrap">...</div>
  </li>
</ul>

或更简单

$(".caption-wrap").append(function(idx) {
  return '<a href="' + $(this).prev('a').attr("href") + '"><span class="clickable"></span></a>';
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="slides">
  <li>
    <a href="test1">...</a>
    <div class="caption-wrap">...</div>
  </li>
  <li>
    <a href="test2">...</a>
    <div class="caption-wrap">...</div>
  </li>
</ul>

Answer 2

如果您坚持使用当前的代码结构（生成html页面并调用文档就绪的javascript函数来形成div s的子元素），您可以尝试添加for循环：

$(document).ready(function(){
    for(i=0; i<$("ul.slides li").length; i++){
        $(".caption-wrap:eq("+i+")").append("<a href=\""+$("ul[class=\"slides\"] > li > a:eq("+i+")").attr("href")+"\"><span class=\"clickable\"></span></a>");
    }
});

但您也可以将事件侦听器绑定到div元素并获取其兄弟a标记的href。

另外，您可以......直接在HTML代码中添加DOM元素？

Answer 3

jQuery可以轻松地使用＆＃34; caption-wrap＆＃34;来获取所有div的列表。类和循环它们。然后，您可以相对参考附近的元素。

＆＃13;

$(document).on("ready", function() {
  /*Loop each of the caption divs*/
  $(".caption-wrap").each(function(i, e) {

    var this$ = $(this);
    /*Grab the link from the A element within the same li as the div*/
    var href = this$.siblings("a").attr("href");
    /*alternately this could be done as a data attribute on the div ie*/
    /*href = this$.attr("data-href");*/
    this$.append("<a href='" + href + "'><span class='clickable'>" + i + "</span></a>");
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="slides">
  <li>
    <a href="test1"></a>
    <div data-href="test1" class="caption-wrap"></div>
  </li>
  <li>
    <a href="test2"></a>
    <div data-href="test2" class="caption-wrap"></div>
  </li>
</ul>

＆＃13;

jQuery - 推广代码，使其适用于任意数量的幻灯片

3 个答案: