Question

I am attempting to wrap images with a tags inside list items that are part of a slideshow, and having problems getting it to work. does anyone have some input? not sure if once I wrap the image, it will break the javascript code, but I am having a tough time getting it to wrap, or maybe I am way off here... I do just fine creating the mouseover to swap the images, but not sure on wrapping the a tag...any help would be great!

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 Fiddle

＆＃13;

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();
    }
});

＆＃13;

<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>

＆＃13;

编辑：徘徊两次用另一个包裹。现在修好了

用<a> tags in a slideshow

1 个答案: