的Javascript搜索過濾器除去頁面元素

我的大腦被卡住了，我不能讓下面的代碼工作。的Javascript搜索過濾器除去頁面元素

什麼我是在一個完整的鏈接網站的頂部的搜索欄，我想篩選出的鏈接，在酒吧的用戶類型。

這裏是網頁的一個片段：

<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'標籤，並通過添加display：none樣式來刪除'p'標籤中鏈接名稱不匹配的拼貼。

這是接近這一目標的最佳方式是什麼？

來源

2017-09-04 Taylor V

小心使用函數內部的全局變量，因爲你可能把事情搞砸在其他地方。閱讀關於在函數內部使用'var'的信息。 – yezzz

要觸發功能resourceFilter，則需要對其進行格式化作爲HTML事件處理onkeyup的功能。除此之外，它似乎工作正常。所以你的html應該是：

<input type="text" id="resourceSearch" onkeyup="resourceFilter()" placeholder="Filter resources by name..">

來源

2017-09-04 23:13:24

謝謝！我一直在敲打我的頭靠在我的辦公桌上了一整天試圖找出什麼我做錯了，我完全忽略了我的HTML。 –

的Javascript搜索過濾器除去頁面元素

回答

相關問題