내 두뇌가 막혀서 아래 코드가 작동하지 않습니다.
내가 가진 것은 링크로 가득 찬 웹 사이트 상단에있는 검색 창이고 사용자가 막대에 입력 할 때 링크를 필터링하고 싶습니다.
다음은 웹 페이지의 일부입니다.
<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'태그의 링크 이름이 일치하지 않는 타일을 제거하고 싶습니다.
이것이이 목표에 접근하는 가장 좋은 방법입니까?
함수를 트리거하려면 resourceFilterhtml 이벤트 핸들러에서 함수로 형식을 지정해야합니다 onkeyup. 그 외에는 잘 작동하는 것 같습니다. 따라서 HTML은 다음과 같아야합니다.
<input type="text" id="resourceSearch" onkeyup="resourceFilter()" placeholder="Filter resources by name..">
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다