私の脳は立ち往生していて、以下のコードを機能させることができません。
私が持っているのは、リンクでいっぱいのWebサイトの上部にある検索バーです。ユーザーがバーに入力すると、リンクが除外されます。
これがウェブページの抜粋です：
<input type="text" id="resourceSearch" onkeyup="resourceFilter" placeholder="Filter resources by name..">
<div id="resourceTiles" class="resource-tiles">
<a class="resource-tile-container" target="_blank" href="http://hostname/cacti/">
<div class="resource-tile-icon-container">
<img src="/media/tile-icons/analytics.png">
</div>
<div class="resource-tile-title-container">
<p>Cacti Traffic Graphing</p>
</div>
</a>
</div>
<script type="text/javascript" src="scripts/script.js"></script>
そして私が使おうとしているJavascript：
function resourceFilter() {
var input, filter, tiles, tile, resource, i;
input = document.getElementById("resourceSearch");
filter = input.value.toUpperCase();
tiles = document.getElementById("resourceTiles");
tile = tiles.getElementsByTagName("a");
for (i = 0; i < tile.length; i++) {
resource = tile[i].getElementsByTagName("p")[0];
if (resource) {
if (resource.innerHTML.toUpperCase().indexOf(filter) > -1) {
tile[i].style.display = "";
} else {
tile[i].style.display = "none";
}
}
}
}
私はJavascriptを初めて使用し、他の場所で見つけたコードを再利用しようとしましたが、これをどのように実行すればよいかわかりません。
スクリプトで「resourceTiles」div内のすべての「a」タグを検索し、「p」タグのリンク名が一致しないタイルを、display：noneスタイルを追加して削除したいと思います。
これは、この目標に近づくための最良の方法ですか？
関数をトリガーするにresourceFilterは、htmlイベントハンドラーで関数としてフォーマットする必要がありますonkeyup。それ以外は問題ないようです。したがって、HTMLは次のようになります。
<input type="text" id="resourceSearch" onkeyup="resourceFilter()" placeholder="Filter resources by name..">
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加