如果 "href" 方向没有文件,如何隐藏整个跨度

How to hide the whole span if there is no file in "href" direction

我在隐藏空链接时遇到问题。请有人帮助我。:

<a href="/sunsetplanlama/<?php echo $sonuc['proje_ismi'] ?>/kumas_1.png"  data-lightbox="kumas" data-title="<?php echo $sonuc['proje_ismi'] ?>" class="tab active"  >
K1
</a>

如果 "href="/sunsetplanlama/<?php echo $sonuc['proje_ismi'] ?>/kumas_1.png" 去不了我想要隐藏的 "K1" 字母..

我该怎么做?

您可以使用file_exists()函数来检查文件是否存在。

if(file_exists("/sunsetplanlama/".$sonuc['proje_ismi']."/kumas_1.png")){
    echo '<a href="/sunsetplanlama/'.$sonuc['proje_ismi'].'/kumas_1.png"  data-lightbox="kumas" data-title="'.$sonuc['proje_ismi'].'" class="tab active" >K1</a>';
}

需要考虑的几点:

  • 服务器端解决方案不合适:您想在客户端测试资源可用性,而这只能通过客户端作为代理来实现。
  • 检查资源可能需要时间,特别是比在客户端呈现 html 所需的时间更多。删除可见标记(例如示例中的 span 元素)取决于检索资源的失败,可能会导致呈现的 material 短暂显示并再次消失,而本意根本不显示它。所以更好的策略是默认隐藏它,并在确定资源可用性后立即显示它。

function ready () {
  let anl_toTest = Array.from ( document.querySelectorAll ( '.fa-sign-x' ) )
    ;
  
  anl_toTest.forEach ( (e_span) => {
    let myRequest = new Request ( e_span.parentNode.href)
      ;
     
    // Fetch API. See [this MDN section](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for details and code samples  
    fetch(myRequest)
      .then (
          function(response) {
            if (response.ok) { // Resource was successfully retrieved, show the link 
              e_span.style.display = "inline";
            }
          }
        , function (e) {
            console.log(`Failed on '${myRequest.url}': ${e.message}.`);
          }
      );
   });
} // ready

window.addEventListener ( 'load', ready );
.fa-sign-x {
  display: none;
}
<a href="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon&f=y"  data-lightbox="kumas" data-title="Pattern" class="tab active"  >
   <span  class="fa-sign-x" >Pattern</span>
</a>&nbsp;
<a href="https://www.example.com/whatever.jpg"  data-lightbox="kumas" data-title="Failed" class="tab active"  >
   <span  class="fa-sign-x" >Failed</span>
</a>&nbsp;
<a href="https://secure.gravatar.com/avatar/1a0ea6b0656f0af322419bd6a607598f?s=100&d=retro&r=g"  data-lightbox="kumas" data-title="Polar Bear" class="tab active"  >
   <span  class="fa-sign-x" >Polar Bear</span>
</a>