Javascript-如何在该代码段中以链接图像而不是链接文本为目标？

我希望以链接图像而不是链接文本为目标，这是使用此页面上的textContent属性在以下代码段中进行编码的方式：www.ninjasdontsweat.com。我的理解是，当页面加载并向搜索文本周围的元素（在本例中为

元素）添加类名“sqs search ui button sqs search ui button wrapper”时，搜索被激活

//搜寻
document.addEventListener（'DOMContentLoaded'，function（）{
var nav=document.queryselectoral（“.main nav.external link”）；
Array.prototype.forEach.call（导航，函数（el，i）{
if（el.textContent.match（/Search/）{
el.className+=“sqs搜索ui按钮sqs搜索ui按钮包装器”；
}
});
});

在我的页面上（见下文），基本上我认为需要做的是：单击search.jpg时，javascript将做两件事…将类名“sqs search ui button sqs search ui button wrapper”添加到

---

您还需要搜索元素内部的图像：

var nav = document.querySelectorAll(".main-nav .external-link");

Array.prototype.forEach.call(nav,function(el,i){
  if(matches(el)) {
    el.className += ' sqs-search-ui-button sqs-search-ui-button-wrapper';
  }
});

function matches(el) {
  if (el.textContent.match(/Search/)) {
    return true;
  }

  var images = el.getElementsByTagName("img");
  return Array.prototype.some.call(images, function(img) {
    return img.src.match(/search/);
  });
}

---

如果您有更多的条件（例如，匹配图像的

标题

），只需将它们添加到

匹配

函数中即可。

为什么这么复杂？给你想要触发搜索的任何元素一个id，并在你的脚本中专门针对它，这会容易得多。你好，Renato，很抱歉没有尽快回复你，谢谢你的回答。由于某种原因，你的解决方案对我不起作用。我想要的是image search.jpg打开搜索页面，就像它在本例中所做的那样：在忍者网站中，搜索打开时导航中的搜索链接。但我希望在单击search.jpg时激活搜索。你认为你的解决方案能做到这一点吗？再次感谢！

<div class="wrapper">

         <a class="project " href="/nandf/" data-ajaxify="false">
           <div>
            <div class="project-image"><div class="intrinsic">
             <div class="content-fill" style="overflow: hidden;">
               <img data-src="http://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg" 
               data-image="http://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg" 
               data-image-dimensions="396x396" data-image-focal-point="0.5,0.5" 
               data-load="false" alt="search" 
               class="" src="https://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg?format=300w" 
               data-image-resolution="300w" style="top: 0px; left: 0px; width: 282px; height: 282px; position: relative;"></div></div><div class="project-item-count">1</div></div>
            <div class="project-title">search</div>
           </div>
        </a>
</div> 

var nav = document.querySelectorAll(".main-nav .external-link");

Array.prototype.forEach.call(nav,function(el,i){
  if(matches(el)) {
    el.className += ' sqs-search-ui-button sqs-search-ui-button-wrapper';
  }
});

function matches(el) {
  if (el.textContent.match(/Search/)) {
    return true;
  }

  var images = el.getElementsByTagName("img");
  return Array.prototype.some.call(images, function(img) {
    return img.src.match(/search/);
  });
}