Question

我想定位链接图片而不是链接文本，这是使用此页面上的textContent属性在以下代码段中编码的方式：www.ninjasdontsweat.com。我理解的方式是在页面加载时激活搜索并将className'sqs-search-ui-button sqs-search-ui-button-wrapper'添加到搜索文本周围的元素（在本例中为＆lt; li＆gt; element）。

<script>
//SEARCH
document.addEventListener('DOMContentLoaded', function(){
    var nav = document.querySelectorAll(".main-nav .external-link");
    Array.prototype.forEach.call(nav,function(el,i){
        if (el.textContent.match(/Search/)) {
            el.className += ' sqs-search-ui-button sqs-search-ui-button-wrapper';
        }
    });
});
</script>

<li class="external-link sqs-search-ui-button sqs-search-ui-button-wrapper">
      <a href="/Search">Search</a>
</li>

在我的页面上（见下文），基本上我认为需要发生的是：当点击search.jpg时，javascript会做两件事...添加className“sqs-search-ui-button sqs- search-ui-button-wrapper“到＆lt; a＆gt;元素并取消激活href“/ nandf /”，允许css覆盖页面，就像在第一个代码片段中一样。希望有道理！如果您有任何疑问，请告诉我。

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

Answer 1

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

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

如果您有更多条件（例如匹配图片的title），则只需将它们添加到matches功能。

Javascript - 如何在此代码段中定位链接图像而不是链接文本？

1 个答案: