<li>在<a>幻灯片放映中使用标签包装

Question

我正试图在列表项内使用标签包装图像，这是幻灯片的一部分，并且有问题让它工作。有人有什么意见吗?不确定是否一旦我包装图像，它会打破javascript代码，但我有一个艰难的时间让它包装，或者也许我在这里的方式…我只是很好地创建鼠标悬停来交换图像，但不确定包装标签…任何帮助都太好了!

html

<div id="container" class="cf">
    <div id="main" role="main">
       <section class="slider">
          <div class="flexslider">
             <ul class="slides">
                 <li class="slide-link-1" data-thumb="imgs/landing-page/slider-img-1.jpg">
                     <img src="imgs/landing-page/slider-img-1.jpg" />
                 </li>
                 <li data-thumb="imgs/landing-page/slider-img-2.jpg">
                     <img src="imgs/landing-page/slider-img-2.jpg" />
                 </li>

jquery

$('.slide-link-1 img').on({'mouseover' : function() {
      $(this).contents().wrap('<a href="',google.com,'"/></a>');  
},

Answer 1

创建一个链接数组:

var links = [];
links = ['google.com', 'doodle.com', 'booble.com'];

然后，计算你悬停的元素上方有多少个元素，并将其作为索引，在mouseenter时换行，在mouseleave时展开。

JS小提琴

var links = [];
links = ['google.com', 'doodle.com', 'booble.com'];
$('li.slide-link > img').on({
    mouseenter: function () {
        var i = $(this).parent().index('.slide-link');
        $(this).wrap('<a href="' + links[i] + '"></a>');
    },
    mouseleave: function () {
        $(this).unwrap();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
    <li class="slide-link" data-thumb="imgs/landing-page/slider-img-1.jpg">
        <img src="imgs/landing-page/slider-img-1.jpg" />
    </li>
    <li class="slide-link" data-thumb="imgs/landing-page/slider-img-1.jpg">
        <img src="imgs/landing-page/slider-img-1.jpg" />
    </li>
    <li class="slide-link" data-thumb="imgs/landing-page/slider-img-1.jpg">
        <img src="imgs/landing-page/slider-img-1.jpg" />
    </li>
</ul>

EDIT:悬停两次将一个与另一个包裹。现在固定