Question

在todolist中，我尝试搜索我的值，以便使用indexOf！=-1属性，当我控制台登录时一切正常，但我并不奇怪地在屏幕上看到它，我只想查看搜索的内容。

html

<div class="container">
  <div class="row">
    <div class="col-md-5 mx-auto mt-5">
        <div class="card p-4">
             <h3 class="result-title">My Program</h3>
             <input type="text" placeholder="Search" class="search"/>
          <div class="card-body ">
             <ul class="result-list">
                <li class="result-item">Go to the Shop</li>
             </ul>
          </div>
        </div>      
         <div class="card mt-5 p-5">
          <h3> Add Here </h3> 
             <form>  
              <input type="text" class="addtext"  placeholder="SOME "/>
              <button class="addbutton">Add </button>
             </form>
          </div>

    </div>
  </div>
</div>

JS文件



// ADDING ITEM //
document.querySelector(".addbutton").addEventListener("click",(event)=>{ event.preventDefault()
const text=document.querySelector(".addtext").value
const asd=document.createElement("li") 
asd.classList.add("result-item") ;
asd.innerHTML=text
document.querySelector(".result-list").appendChild(asd)
document.querySelector(".addtext").value=""
     } )

     //SEARCH ITEM//
 const search=document.querySelector(".search")
    search.addEventListener("change",()=>{
 const list=document.querySelectorAll(".result-item")
        search.value.toLowerCase()
       list.forEach(item=>{ 
if(item.innerHTML.toLowerCase().indexOf(search.value)!=-1) {item.style.display==="block"}else{;item.style.display==="none"}})                    })

Answer 1

您需要使用=，而不是===。

item.style.display="block"}else{;item.style.display="none"}

一个等号更改该值，而两个或三个比较该值。

搜索和筛选列表元素JS

1 个答案: