如何使用 Javascript 按标签过滤图片库？

Question

我一直在努力了解如何克服这个问题。我的任务是检索用户输入，并在击键时查看用户输入是否匹配任何数量的 .tags 如果不匹配，则隐藏 .thumb-display。

到目前为止，我已经能够收集到我需要添加/删除“隐藏”类列表以及使用事件处理程序“输入”，但是我不太明白如何使用事件处理程序“输入”在这种情况下以及更改事件。

这是为了家庭作业，所以我更愿意对答案进行解释，而不仅仅是一个答案，这样我就可以理解我目前无法理解的内容。即使是一个提示也可能是至关重要的，让我走上正轨！规则是：不能更改 HTML，必须使用 JavaScript。

这里是 HTML：

        <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 src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
                <p class="tags">#africa #mountain #road</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
                <p class="tags">#palmbeach #distantpeaks</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/beach_road.jpg" alt="beach road" />
                <p class="tags">#oceanbeach #mountainroad</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
                <p class="tags">#lake #clearskies #onthewater</p>
            </div>
            <div class="thumb-display">
                <img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
                <p class="tags">#fallcolors #bridgecrossing #river</p>
            </div>
        </div>
    </section>

Answer 1

您需要监听输入keyup 事件并从输入中检索值，然后检查该值是否与任何标签匹配并显示/隐藏`parentNode

document.addEventListener('DOMContentLoaded', () => {
    const inputEl = document.getElementById('filter');
    const tags = Array.from(document.querySelectorAll('.tags'));

    inputEl.addEventListener('keyup', () => {
        const value = inputEl.value;

        tags.forEach(tag => {
            if (tag.textContent.includes(value)) {
                tag.parentNode.style.display = 'block'
            } else {
                tag.parentNode.style.display = 'none'
            }
        })
    })
})

<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>
<section class="gallery">
    <div class="row">
        <h1>Gallery</h1>
    </div>
    <div class="row">
        <div class="thumb-display">
            <img src="img/thumbs/african_road_to_the_mountain.jpg" alt="african road to the mountain" />
            <p class="tags">#africa #mountain #road</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/beach_and_palms.jpg" alt="beach and palms" />
            <p class="tags">#palmbeach #distantpeaks</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/beach_road.jpg" alt="beach road" />
            <p class="tags">#oceanbeach #mountainroad</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/calm_lake.jpg" alt="calm lake" />
            <p class="tags">#lake #clearskies #onthewater</p>
        </div>
        <div class="thumb-display">
            <img src="img/thumbs/fall_bridge.jpg" alt="fall bridge" />
            <p class="tags">#fallcolors #bridgecrossing #river</p>
        </div>
    </div>
</section>

Answer 2

您需要获取用户输入。所以你需要监听一个事件。 Add Event Listener 救援。不过是哪个活动？ “change”怎么样。

好的，你可以得到他们输入的内容，很好。现在您需要将其与标签进行比较。所以是时候找到所有这些了。您可以使用querySelector 获取所有“.tags”。这将为您提供一个节点列表，您可以循环访问这些节点以收集innerText。您可以检查innerText includes 是否是用户键入的输入。如果没有，那么你会找到 closest ".thumb-display" 和 set 一个样式属性来隐藏它。如果输入在 innerText 中，那么您需要 remove 任何隐藏最近父级的样式属性。

砰，完成。也许，我没有尝试过，我几乎从来没有第一次做对。但它会是这样的。