Question

我有50个div，如下所示，图像无法点击。我想使图像可点击，具体取决于div包含的链接：它始终是article_title标记中的href链接。

如何通过添加几行JavaScript来实现这一目标？

我正在考虑手动为每个img标签添加一个ID，然后使用getElementById做一些魔术，但这需要太长时间。

<div class="col-md-4 article">
      <img src="7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235"> 
      <div class="article_category">
         <a href=”http://www.canarywharfian.co.uk/forums/wealth-management/”>Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="http://www.canarywharfian.co.uk/threads/7-tips-for-lasting-in-your-career.242/" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="http://www.canarywharfian.co.uk/members/smallcappm.1140/">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
   </div>

Answer 1

也许这个（使用jQuery）：

<script>
    $(document).ready(function () {
        $('.block').each(function( index, value ) {
            let href = $(this).find('a[href]').attr('href');
            $(this).find('img').wrap('<a href=' + href + '></a>');
        });
    });
</script>

Answer 2

如果你使用jQuery，你可以简单地用元素包装图像。

$(function(){
  // traversing all the images
  $('img').each(function(){
    // get the link by finding from parent
    var link = $(this).parent().find('.article_title a').attr('href');
    // replace the image with link + image
    $(this).replaceWith('<a href="' + link + '">' + $(this)[0].outerHTML + '</a>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="col-md-4 article">
      <img src="http://www.canarywharfian.co.uk/7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235"> 
      <div class="article_category">
         <a href="http://www.canarywharfian.co.uk/forums/wealth-management/">Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="http://www.canarywharfian.co.uk/threads/7-tips-for-lasting-in-your-career.242/" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="http://www.canarywharfian.co.uk/members/smallcappm.1140/">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
   </div>

Answer 3

根据您的vanila Javascript标记，您可以做的是搜索并缓存所有article。在每篇文章中搜索标题内的锚点，并将其href设置为新创建的锚点。将图像附加到新创建的锚点中，并将其添加到您的文章中。

一个简单的例子（为演示减少H1字体大小）：

var articles = document.getElementsByClassName('article');

[].forEach.call(articles, function(article) {
	var image = article.querySelector('img:first-child');
	var title = article.querySelector('h1.article_title > a');
	var anchor = document.createElement('a');
	anchor.href = title.href;
	anchor.appendChild(image);
	article.insertBefore(anchor, article.firstChild);
});

h1 { font-size: 12px; }

<div class="col-md-4 article">
      <img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career"> 
      <div class="article_category">
         <a href="example.com">Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="//bing.com" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="example.com">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
</div>
<hr/>
<div class="col-md-4 article">
      <img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career"> 
      <div class="article_category">
         <a href="example.com">Wealth Management</a> 
      </div>
      <div class="article_meta">
         <h1 class="article_title"><a href="//google.com" rel="bookmark" title="7 Tips For Lasting In Your Career">7 Tips For Lasting In Your Career</a></h1>
         <div class="col-md-6 author_date"><a href="example.com">SmallCapPM</a> - <span class="date"> Mar 10, 2016</span></div>
         <div class="article_abstract">
            Many of you are hoping and planning for a long and successful career in finance...
         </div>
      </div>
</div>

注意，如何从标题锚中选取指向bing和google的链接，并将其插入到包装图像的新锚中。

如何使用JS动态添加HTML中的图像链接？

3 个答案: