用幻灯片中的<a>标记包装<li>

Question

我试图在列表项目中包装图片，这些标签是幻灯片的一部分，在使其正常工作时遇到了问题。有人有什么意见吗？不确定一旦我包装图像，它将打破javascript代码，但我有一个困难的时间让它包装，或者我可能是远离这里…我很好地创建鼠标以交换图像，但不确定包装tag...any帮助将是很好的！

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'];

然后，计算在悬停的元素上面有多少个元素，并将其用作索引，在鼠标中心上包装，在mouseleave上展开。

JS Fiddle

​

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>

​

编辑：悬停两次，用另一个包装。现在修好了