第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 JS 中使用選擇字段過濾元素時(shí)出現(xiàn)問題

在 JS 中使用選擇字段過濾元素時(shí)出現(xiàn)問題

翻閱古今 2023-07-14 14:50:19
我正在開發(fā)一種圖片管理應(yīng)用程序,并且有一個(gè)具有過濾圖片功能的部分。我有 3 個(gè)輸入字段:2 個(gè)選擇框(一個(gè)用于選擇位置,另一個(gè)用于選擇事件)和一個(gè)日期選擇器。我將圖片包裝在Photo()對(duì)象中,其中包括圖片的路徑、日期、事件和位置。我希望它的工作方式是:如果您選擇一個(gè)位置,則具有該位置的所有圖片都會(huì)顯示在預(yù)覽中,但如果您還選擇一個(gè)事件,則具有該位置和事件的所有圖片(同時(shí))將顯示在預(yù)覽中,并且以同樣的方式,如果您選擇一個(gè)日期,則將選擇(同時(shí))具有該日期、事件和地點(diǎn)的所有圖片。這是我的這部分的 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 函數(shù)的一部分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")        }}我只能想辦法顯示具有該位置或事件或日期的所有圖片,或者具有該位置的所有圖片和具有該事件的所有圖片以及具有該日期的所有圖片(重復(fù))。預(yù)先感謝,我已經(jīng)看了幾個(gè)小時(shí)了,最后承認(rèn)失敗。
查看完整描述

1 回答

?
慕工程0101907

TA貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊

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


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)

    }

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-07-14
  • 1 回答
  • 0 關(guān)注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)