Question

我正在为即将举行的活动制作幻灯片。幻灯片可以链接到相应的活动页面。但是，如果他们没有活动页面，并不是所有的幻灯片都有链接。

这是我能够输出的HTML：

 <ul>
  <li><img><a href="/link1">link1</a></li>
  <li><img><a href="/link2">link2</a></li>
  <li><img></li> // this one doesn't have a link
 </ul>

然后使用jQuery我试图将HTML改为：

 <ul>
  <li><a href="/link1"><img></a></li>
  <li><a href="/link2"><img></a></li>
  <li><img></li> // this one doesn't have a link
 </ul>

这是我一直在研究的jQuery：

$(function() {

    $(' ul li img').each(function() { // For each image

        if($(' ul li img').next('a').attr("href").length) // check if banner has a link

        var a = $(this).next('a').attr("href"); // Find its associated anchor and give a name

        $(' ul li img').wrap('<a href="' + a + '"></a>'); // And wrap the image

        return false;

});

这似乎只是采用第一个href并用相同的href包装每个图像。

Answer 1

$(' ul li img')返回数组，因此在.each(funtion(){})中，您必须使用$( this )返回数组中的当前img。

您的代码必须如下所示：

$(' ul li img').each(function() { // For each image
  var $a = $(this).next('a').attr("href");
  if($a.length){ // check if banner has a link
    $(this).wrap('<a href="' + $a + '"></a>'); // And wrap the image
  }
});

未经测试。

Answer 2

我建议不要使用<a href ...>并将其包装，而是建议为图像提供数据属性，检查是否存在，如果有，请添加一个事件监听器以链接到目标页面。

var images = document.getElementsByTagName('img');
for (var i = 0; i<images.length; i++) {
    if (images[i].getAttribute('data-link')) {
        images[i].addEventListener('click',function(){
            /* this is what you want to do:
            window.location.href=this.getAttribute('data-link'); */
            // just for the effect here:
            alert(this.getAttribute('data-link'));
        });
    }
}

<ul>
    <li><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" data-link="http://www.google.com"></li>
  <li><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/286.jpg" data-link="http://www.twitter.com"></li>
      <li><img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/138.jpg"></li> 
 </ul>

用下一个链接包裹图像

2 个答案: