hrefファイルが存在する場合にのみリンクが表示されます。

Question

リンクの順序のないリストを持つ一般的なindex.htmlファイルがあります。リンク先のファイルが存在する場合にのみリンクを表示することができます。

<ul> 
    <li><a class="button" href="text-1.htm">Text 1</a></li> 
    <li><a class="button" href="text-2.htm">Text 2</a></li> 
    <li><a class="button" href="text-3.htm">Text 3</a></li> 
    </ul> 

これはJavaScriptで可能ですか、それともPHPを使用する必要がありますか？

Answer 1

私は個人的にこれをPHPで使用していますが、これは私の意見です。他の誰かが優れたJSソリューションを持っていれば、代わりにそれを使用してください！ここで

は、私が使用するPHPのバージョンです：

<?php 
    echo '<ul>'; 
    $files = ['text-1.htm', 'text-2.htm', 'text-3.htm']; 
    foreach($files as $file) { 
     if (file_exists($file)) { 
      $file_clean = explode('.', $file); 
      $file_clean = str_replace('-', ' ', $file_clean[0]); 
      $file_clean = ucfirst($file_clean); 
      echo '<li><a class="button" href="' . $file . '">' . $file_clean . '</a></li>'; 
     } 
    } 
    echo '</ul>'; 
?> 

それが行く方法を見て、ことを試してみてください。

Answer 2

さてあなたは、あなたがアヤックスを使用して、以下のこのような何かを試みることができるあなたのhrefを表示したり、EMに

Answer 3

を非表示にするファイルが存在する場合にはjavascriptのオブザーバーのテストを行い、その後、ショーを使用して非表示にしたり、jQueryのattrの可能性があります。

$.ajax({ 
    url: 'website.com/text-1.html', 
    success: function(data){ 
    $('.mySelector').addClass(); //do something like add a class to show link 
    }, 
    error: function(data){ 
    console.log('Does not appear to exist'); 
    }, 
}) 

Answer 4

ファイルがすべて、表示されているページと同じプロトコル、ドメイン、ポートにある限り、可能です。各ファイルは一般的にいえ

var buttons = document.querySelectorAll('.button'); 

for (var i = 0; i < buttons.length; i++) { 
    (function(button, http) { 
     http.open('HEAD', button.href); 
     http.onreadystatechange = function() { 
      if (this.readyState != this.DONE || this.status != 200) { 
       button.style.display = 'none'; 
      } 
     }; 
     http.send(); 
    }(buttons[i], new XMLHttpRequest())) 
} 

を得できる場合

あなたは、インスタンスのために手動でリンクが実際にクライアント側にそれをチェックするのではなく、存在して行うことを確認するだろう、参照するにはAJAX要求を行うことができます。

Answer 5

@Ashleyは近いですが、リンクが巨大なファイルを参照する場合、ajaxは応答する前にファイル全体をダウンロードしようとします。

$('a').each(function() { 
 
    $.ajax({ 
 
    context: this, 
 
    type: 'HEAD', 
 
    url: $(this).attr('href'), 
 
    success: function(data) { 
 
     $(this).closest("li").css('display','list-item'); 
 
    }, 
 
    error: function(data) { 
 
     console.log($(this).attr('href') + ' Does not appear to exist'); 
 
    }, 
 
    }) 
 
});

li{ 
 
display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Cnn.svg/2000px-Cnn.svg.png">CNN Logo</a> 
 
    </li> 
 
    <li><a href="https://www.example.com/2000pxa-Cnn.svg.png">Nonsense Link</a> 
 
    </li> 
 
    <li><a class="button" href="text-3.htm">Text 3</a> 
 
    </li> 
 
</ul>