在 JS 中使用选择字段过滤元素时出现问题

Question

我正在开发一种图片管理应用程序，并且有一个具有过滤图片功能的部分。我有 3 个输入字段：2 个选择框（一个用于选择位置，另一个用于选择事件）和一个日期选择器。我将图片包装在Photo()对象中，其中包括图片的路径、日期、事件和位置。

我希望它的工作方式是：如果您选择一个位置，则具有该位置的所有图片都会显示在预览中，但如果您还选择一个事件，则具有该位置和事件的所有图片（同时）将显示在预览中，并且以同样的方式，如果您选择一个日期，则将选择（同时）具有该日期、事件和地点的所有图片。

这是我的这部分的 HTML：

<div id="newAlbumExtraDetails"> 

    <a>Filter:</a>

    <select id="newAlbumLocation" onchange="previewUpdater('subsequent')">

        <option value="" disabled selected hidden>Localization...</option>

    </select>

    <select id="newAlbumEvent" onchange="previewUpdater('subsequent')">

        <option value="" disabled selected hidden>Event...</option>

    </select>

    <input type="date" id="newAlbumDate" name="newAlbumDate" onchange="previewUpdater('subsequent')">

    <button type="button" class="formButton"  id="saveAlbumButton" onclick="saveAlbum()">Save Album</button>

    <button type="button" class="formButton"  id="discardAlbumButton" onclick="goBack()">Discard Album</button>    

</div>

我的 JS 函数的一部分previewUpdater()：

function previewUpdater(scope){

    let counter = document.querySelector("#previewPhotoCounter")

    let previewBox = document.querySelector("#photosPreview")

    let locationSelector = document.querySelector("#newAlbumLocation")

    let eventSelector = document.querySelector("#newAlbumEvent")

    let dateSelector = document.querySelector("#newAlbumDate")

    

    counter.innerHTML = currentPhotos.length

    // This "initial" part of the function is used to fill the preview box with

    // all the pictures when this filtering area is first visited, it's not very

    // relevant regarding the question.

    if (scope == "initial") {

        fillOptions()

        for (let i = 0; i < currentPhotos.length; i++) {

            let newDiv = document.createElement("div")

            let newImg = document.createElement("img")

    

    }

}

我只能想办法显示具有该位置或事件或日期的所有图片，或者具有该位置的所有图片和具有该事件的所有图片以及具有该日期的所有图片（重复）。

预先感谢，我已经看了几个小时了，最后承认失败。

Answer 1

您需要一个过滤功能来考虑所有可用的过滤器。像这样的东西：if (scope=="subsequent") {&nbsp; const defaultLocation = "Localization...";&nbsp; const defaultEvent = "Event...";&nbsp; const defaultDate = "";&nbsp; // Remove photos that were already there&nbsp; while (previewBox.lastElementChild) {&nbsp; &nbsp; &nbsp; previewBox.removeChild(previewBox.lastElementChild);&nbsp; }&nbsp; // Getting data from the select fields and date picker&nbsp; let selectedLocation = locationSelector.options[locationSelector.selectedIndex].text;&nbsp; let selectedEvent = eventSelector.options[eventSelector.selectedIndex].text;&nbsp; let selectedDate = dateSelector.value&nbsp; for (let i = 0; i < currentPhotos.length; i++) {&nbsp; &nbsp; let currentPicture = currentPhotos[i];&nbsp;&nbsp;&nbsp; &nbsp; // This is currently doing nothing, it's just my way of knowing if the select fields&nbsp; &nbsp; // and date picker have been selected or are in their default values:&nbsp; &nbsp; if (selectedLocation != "Localization..." || selectedEvent != "Event..." || selectedDate != "" ) {&nbsp; &nbsp; &nbsp; &nbsp; console.log("selected!")&nbsp; &nbsp; }&nbsp; &nbsp; if((selectedLocation == defaultLocation || currentPicture.location == selectedLocation) &&&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;(selectedEvent == defaultEvent || currentPicture.event == selectedEvent) &&&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;(selectedDate == defaultDate || currentPicture.date == selectedDate)) {&nbsp; &nbsp; &nbsp; &nbsp; let newDiv = document.createElement("div");&nbsp; &nbsp; &nbsp; &nbsp; let newImg = document.createElement("img");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // From here on it's simply adding the pictures to the preview box&nbsp; &nbsp; &nbsp; &nbsp; newImg.setAttribute("src", currentPhotos[i].path);&nbsp; &nbsp; &nbsp; &nbsp; newImg.addEventListener("click", openPhotoViewer)&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; newDiv.appendChild(newImg)&nbsp; &nbsp; &nbsp; &nbsp; previewBox.appendChild(newDiv)&nbsp; &nbsp; }&nbsp; }}