如何使用 javascript 進行搜索和過濾

Question

所以我正在嘗試進行照片過濾器搜索。 我能夠進入 keyup function 但隨后卡在如何搜索和 select 段落文本上。 我無法更改 HTML，只能添加 Javascript。

到目前為止，我的 Javascript

window.addEventListener('load', function(e) {

  const query = document.querySelector('#filter');

  let images = document.querySelector('.thumb-display');


    query.addEventListener('keyup', function(e) {
        let search = query.value;


         for (var i = 0; i < images.length; i++) {
            let searchVal = images[i].getElementByTagName('p')[0].innerHTML;

            if (searchVal.indexOf(search) > -1) {
                images[i].display = "";

            } else {
                images[i].display = "none";
            };
        }; 

    });


  })// NO CODE OUTSIDE OF HERE

我希望能夠搜索（例如）#oceanbeach #mountainroad

文本並具有不 go 的圖像，搜索被隱藏，但我無法讓它工作。

Answer 1

您可以使用文本框的輸入事件並循環通過p標簽來顯示/隱藏.thumb-display 。

 const txtFilter = document.getElementById('filter'); const lnkReset = document.querySelector('.reset'); const thumbnails = document.querySelectorAll('.thumb-display'); const tagContainers = document.querySelectorAll('.tags'); txtFilter.addEventListener('input', e => { const filter = e.target.value; if (filter === '') { resetFilter(); } else { // Show the reset link/button. lnkReset.classList.remove('hidden'); tagContainers.forEach(tagContainer => { const thumbnail = tagContainer.closest('.thumb-display'); const tags = tagContainer.innerText; if (tags.indexOf(filter) >= 0) { thumbnail.classList.remove('hidden'); } else { thumbnail.classList.add('hidden'); } }); } }); lnkReset.addEventListener('click', e => { e.preventDefault(); resetFilter(); }); function resetFilter() { thumbnails.forEach(thumbnail => thumbnail.classList.remove('hidden')); lnkReset.classList.add('hidden'); txtFilter.value = ''; }

 body { font: normal 14px/1.4 sans-serif; } img { background: #eee; display: inline-block; height: 100px; width: 100px; }.hidden { display: none; }

 <nav> <ul> <li> <a href="#">Home</a> </li> </ul> <form class="frm-filter"> <div class="frm-group"> <a class="reset hidden" href="#">Reset</a> <input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" /> </div> </form> </nav> <section class="gallery"> <div class="row"> <h1>Gallery</h1> </div> <div class="row"> <div class="thumb-display"> <img /> <p class="tags">#africa #mountain #road</p> </div> <div class="thumb-display"> <img /> <p class="tags">#palmbeach #distantpeaks</p> </div> <div class="thumb-display"> <img /> <p class="tags">#oceanbeach #mountainroad</p> </div> <div class="thumb-display"> <img /> <p class="tags">#lake #clearskies #onthewater</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #bridgecrossing #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #slowdown</p> </div> <div class="thumb-display"> <img /> <p class="tags">#falltrees</p> </div> <div class="thumb-display"> <img /> <p class="tags">#ontheroad #falldriving</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainflowers #clouds #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainlake #retreat</p> </div> <div class="thumb-display"> <img /> <p class="tags">#stormcoming #thepeak</p> </div> <div class="thumb-display"> <img /> <p class="tags">#perfectbeach #whitesand</p> </div> </div> </section>

請注意，這只是檢查p標簽的innerText的值。

Answer 2

let images = document.querySelector('.thumb-display'); 

我認為您正在尋找.querySelectorAll() 。 這將是一個很好的起點：

let images = [ ...document.querySelectorAll('.thumb-display') ];

Answer 3

要 select 所有元素.thumb-display你必須使用Document.querySelectorAll()

• document.querySelectorAll('.thumb-display')

然后你可以這樣做：

 const query = document.querySelector('#filter') const reset = document.querySelector('.reset') const thumbs = document.querySelectorAll('.thumb-display') query.addEventListener('keyup', () => thumbs.forEach(t => { const p = t.querySelector('p') t.style.display = p.innerText.includes(query.value)? '': 'none' })) reset.addEventListener('click', (e) => { e.preventDefault() query.value = '' thumbs.forEach(t => t.style.display = '') })

 img { background: grey; height: 20px; width: 60px; }

 <div class="wrapper"> <nav> <form class="frm-filter"> <div class="frm-group"> <a class="reset hidden" href="#">Reset</a> <input class="form-control" type="text" id="filter" name="filter" placeholder="tag filter" /> </div> </form> </nav> <section class="gallery"> <div class="row"> <h1>Gallery</h1> </div> <div class="row"> <div class="thumb-display"> <img /> <p class="tags">#africa #mountain #road</p> </div> <div class="thumb-display"> <img /> <p class="tags">#palmbeach #distantpeaks</p> </div> <div class="thumb-display"> <img /> <p class="tags">#oceanbeach #mountainroad</p> </div> <div class="thumb-display"> <img /> <p class="tags">#lake #clearskies #onthewater</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #bridgecrossing #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#fallcolors #slowdown</p> </div> <div class="thumb-display"> <img /> <p class="tags">#falltrees</p> </div> <div class="thumb-display"> <img /> <p class="tags">#ontheroad #falldriving</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainflowers #clouds #river</p> </div> <div class="thumb-display"> <img /> <p class="tags">#mountainlake #retreat</p> </div> <div class="thumb-display"> <img /> <p class="tags">#stormcoming #thepeak</p> </div> <div class="thumb-display"> <img /> <p class="tags">#perfectbeach #whitesand</p> </div> </div> </section> </div>