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

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

Javascript函數(shù)過濾三個(gè)不同的列表

Javascript函數(shù)過濾三個(gè)不同的列表

慕碼人2483693 2023-11-02 21:33:54
我對 javascript 完全陌生，所以請?jiān)徫业男率?。我希望根?jù)文本框中輸入的內(nèi)容過濾三個(gè)不同的列表。我的函數(shù)僅對第一個(gè)列表進(jìn)行排序，并且僅當(dāng)我“按 Id 獲取元素”而不是類時(shí)進(jìn)行排序。我的想法是按類獲取元素，從而過濾所有三個(gè)列表，但它并不完全那樣工作。我能做些什么？JavaScript： <script>    function filterList() {                var input, filter, ul, li, a, i, txtValue;        input = document.getElementById('searchCombo');        filter = input.value.toUpperCase();        ul = document.getElementsByClassName("drugList");        li = ul.getElementsByTagName('li');                for (i = 0; i < li.length; i++) {            a = li[i].getElementsByTagName("a")[0];            txtValue = a.textContent || a.innerText;            if (txtValue.toUpperCase().indexOf(filter) > -1) {                li[i].style.display = "";            } else {                li[i].style.display = "none";            }        }    }</script>HTML 列表：<input type="text" id="searchCombo" onkeyup="filterList()" placeholder="Search for names.."><ul ID="list1" class="drugList">    <li><a href="#">List 1 element 1</a></li>    <li><a href="#">List 1 element 2</a></li>    <li><a href="#">List 1 element 3</a></li></ul><ul ID="list2" class="drugList">    <li><a href="#">List 2 element 1</a></li>    <li><a href="#">List 2 element 2</a></li>    <li><a href="#">List 2 element 3</a></li></ul><ul ID="list3" class="drugList">    <li><a href="#">List 3 element 1</a></li>    <li><a href="#">List 3 element 2</a></li>    <li><a href="#">List 3 element 3</a></li></ul>
查看完整描述

2 回答

?
MM們

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

我建議您使用Element.querySelectorAll()來過濾 drugList 類中的 li 元素。然后迭代元素：

const nothingFound = document.querySelector('.nothingFound');

nothingFound.style.display="none";

const searchCombo = document.getElementById('searchCombo');

searchCombo.addEventListener("keyup", (e)=> {

? const {value} = e.target;

? const liElements=Array.from(document.querySelectorAll(".drugList li"));

? let count = 0;

? liElements.forEach(li => {

? ? li.style.display = "none"

? ? if(li.textContent.toLowerCase().includes(value.toLowerCase())) {

? ? ? li.style.display = "";

? ? ? ++count;

? ? }

? });


? nothingFound.style.display = count > 0 ? "none": "";

});

? ? <input type="text" id="searchCombo" placeholder="Search for names..">


? ? <ul ID="list1" class="drugList">

? ? ? ? <li><a href="#">List 1 element 1</a></li>

? ? ? ? <li><a href="#">List 1 element 2</a></li>

? ? ? ? <li><a href="#">List 1 element 3</a></li>

? ? </ul>


? ? <ul ID="list2" class="drugList">

? ? ? ? <li><a href="#">List 2 element 1</a></li>

? ? ? ? <li><a href="#">List 2 element 2</a></li>

? ? ? ? <li><a href="#">List 2 element 3</a></li>

? ? </ul>


? ? <ul ID="list3" class="drugList">

? ? ? ? <li><a href="#">List 3 element 1</a></li>

? ? ? ? <li><a href="#">List 3 element 2</a></li>

? ? ? ? <li><a href="#">List 3 element 3</a></li>

? ? </ul>

? <span class="nothingFound">Nothing found in this category</span>

另外，您應(yīng)該考慮使用 css 類而不是 element.style.display。



查看完整回答
反對 回復(fù) 2023-11-02
?
弒天下

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

我寫它主要是為了看看我會(huì)寫什么。我在這里發(fā)布了以防有人感興趣。


const select_all = (selector, selectee = document) =>

? Array.from(selectee.querySelectorAll(selector));


const hide_item = item => item.style.display = 'none';

const show_item = item => item.style.display = '';

const item_text = item => item.textContent.toLowerCase() + ' ' + item.dataset.keywords;

const compare? ?= text => item => item_text(item).includes(text);

const has_class = class_name => item => item.className.includes(class_name);

const not_has_class = class_name => item => !has_class(class_name)(item);

const both = (pred_a, pred_b) => item => pred_a(item) && pred_b(item);


const filter_list = text => list => {

? const lis = select_all("li", list);

??

? let to_show = lis.filter(both( not_has_class('none'), compare(text) ));

? if(to_show.length === 0)

? ? to_show = lis.filter(has_class('none'));

??

? lis.forEach(hide_item);

? to_show.forEach(show_item);

};


const filter = (event) =>

? select_all(".drugList").forEach(

? ? filter_list((event?.target?.value || '').toLowerCase())

? );


document.getElementById('searchCombo').addEventListener("keyup", filter);


filter();

<input type="text" id="searchCombo" placeholder="Search for names..">


<ul ID="list1" class="drugList">

? ? <li data-keywords="additional keywords"><a href="#">List 1 element 1</a></li>

? ? <li data-keywords="bob fred"><a href="#">List 1 element 2</a></li>

? ? <li data-keywords="jane neela"><a href="#">List 1 element 3</a></li>

? ? <li class="none">Nothing found in this category</li>

</ul>


<ul ID="list2" class="drugList">

? ? <li><a href="#">List 2 element 1</a></li>

? ? <li><a href="#">List 2 element 2</a></li>

? ? <li><a href="#">List 2 element 3</a></li>

? ? <li class="none">Nothing found in this category</li>

</ul>


<ul ID="list3" class="drugList">

? ? <li><a href="#">List 3 element 1</a></li>

? ? <li><a href="#">List 3 element 2</a></li>

? ? <li><a href="#">List 3 element 3</a></li>

? ? <li class="none">Nothing found in this category</li>

</ul>


查看完整回答
反對 回復(fù) 2023-11-02
  • 2 回答
  • 0 關(guān)注
  • 194 瀏覽
慕課專欄
更多

添加回答

舉報(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)