您好，我想在卡片串列中實作搜索功能。所以我的計劃是遍歷所有名為“card”的元素（使用for回圈）并檢查輸入值是否匹配。所以首先我將“隱藏”類添加到所有元素，然后如果輸入值與卡片類的內部 HTML 匹配，那么我將洗掉隱藏類并添加“顯示”類。但問題出在6,7號。線。說 removeClass /addClass 不是一個函式。每當我使用 $('.name')[i] 時，我都會收到該錯誤。有人可以幫忙嗎？HTML：
<input id="search" type="text" placeholder="search here..."/>
<ul id="contact-list" class="scroller">
<li class="card"> <h2> John Doe 1 </h2> </li >
<li class="card"> <h2> John Doe 2 </h2> </li>
<li class="card"> <h2> Mr. Anderson </h2> </li> </ul>
我的 JS 代碼是這樣的：
1. let search = $('#search');
2. search.addEventListener("input", e => {
3. const value = e.target.value;
4. for (let i = 0; i < $(".name").length; i ) {
5. if ($(".name")[i].innerHTML.includes(value)) {
6. $(".name")[i].closest("li").removeClass("hide");
7. $(".name")[i].closest("li").addClass("show");
}
}
uj5u.com熱心網友回復：
您應該使用.each()方法遍歷 DOM 物件，因為它是為 DOM 回圈而設計的。您可以使用以下方法輕松訪問每個專案$(this)
我假設，你不想遍歷每個“卡片”，如果它包含一些特定的值，你想洗掉隱藏類。
$('.card').each(function(){
if($(this).val().indexOf("some value") > -1)
{
$(this).removeClass("hide").addClass("show");
}
});
請注意，此嘗試需要<li>元素中的值。如果要檢查 中的文本<li>，可以使用$(this).text()而不是$(this).val()
uj5u.com熱心網友回復：
您將 JS 和 JQuery 混合在一起，因此代碼有幾個錯誤。您可以參考以下調整后的代碼以供參考。
document.getElementById('search').addEventListener("input", e => {
const value = e.target.value;
//jQuery part
$(".card").each(function(){
if($(this).html().includes(value)){
$(this).removeClass("hide");
$(this).addClass("show");
}
});
JQuery 物件不同于 DOM 物件。你可以參考這個： document.getElementById vs jQuery $()
uj5u.com熱心網友回復：
以下可能會在不使用 jQuery 的情況下完成您想要的操作：
const lis=[...document.getElementById('contact-list').children];
document.getElementById('search').addEventListener("input", e => {
const value = e.target.value.toLowerCase();
lis.forEach(l=>l.classList.toggle("hide",value.length==0||!l.textContent.trim().toLowerCase().includes(value)))
}).hide {display:none}<input id="search" placeholder="enter search word"><br>
<ul id="contact-list" class="scroller">
<li class="card hide">
<h2> John Doe 1 </h2>
</li>
<li class="card hide">
<h2> John Doe 2 </h2>
</li>
<li class="card hide">
<h2> Mr. Anderson </h2>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480800.html
標籤：jQuery