亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 JS 中使用選擇字段過濾元素時出現問題

在 JS 中使用選擇字段過濾元素時出現問題

翻閱古今 2023-07-14 14:50:19
我正在開發一種圖片管理應用程序,并且有一個具有過濾圖片功能的部分。我有 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")        }}我只能想辦法顯示具有該位置或事件或日期的所有圖片,或者具有該位置的所有圖片和具有該事件的所有圖片以及具有該日期的所有圖片(重復)。預先感謝,我已經看了幾個小時了,最后承認失敗。
查看完整描述

1 回答

?
慕工程0101907

TA貢獻1887條經驗 獲得超5個贊

您需要一個過濾功能來考慮所有可用的過濾器。像這樣的東西:


if (scope=="subsequent") {

  const defaultLocation = "Localization...";

  const defaultEvent = "Event...";

  const defaultDate = "";


  // Remove photos that were already there

  while (previewBox.lastElementChild) {

      previewBox.removeChild(previewBox.lastElementChild);

  }


  // Getting data from the select fields and date picker

  let selectedLocation = locationSelector.options[locationSelector.selectedIndex].text;

  let selectedEvent = eventSelector.options[eventSelector.selectedIndex].text;

  let selectedDate = dateSelector.value


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

    let currentPicture = currentPhotos[i];

  

    // This is currently doing nothing, it's just my way of knowing if the select fields

    // and date picker have been selected or are in their default values:

    if (selectedLocation != "Localization..." || selectedEvent != "Event..." || selectedDate != "" ) {

        console.log("selected!")

    }


    if((selectedLocation == defaultLocation || currentPicture.location == selectedLocation) && 

       (selectedEvent == defaultEvent || currentPicture.event == selectedEvent) && 

       (selectedDate == defaultDate || currentPicture.date == selectedDate)) {


        let newDiv = document.createElement("div");

        let newImg = document.createElement("img");

            

        // From here on it's simply adding the pictures to the preview box

        newImg.setAttribute("src", currentPhotos[i].path);

        newImg.addEventListener("click", openPhotoViewer)

    

        newDiv.appendChild(newImg)

        previewBox.appendChild(newDiv)

    }

  }

}


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 152 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號