个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
当用户对输入进行任何更改时，浏览器将使用 for 循环循环所有 li 标签，并检查尝试 indexOf(inputText) 时返回的内容。如果indexOf返回-1，则需要过滤它并且不显示在屏幕上。
这是我的简单 HTML
<form>
....
<div>
<input type="text" name="ingredientSearch" placeholder="ingredients..">
</div>
</form>
<div id="IngredientsList" class="noneDisplay">
<ul>
<li class="items">Apple</li>
<li class="items">Asparagus</li>
<li class="items">Baking Powder</li>
<li class="items">Balsamic Vinegar</li>
.......
.......
<li class="items">Vinegar</li>
<li class="items">Wheat Flour</li>
<li class="items">White Wine</li>
</ul>
</div>
这是我的 JavaScript 代码。
function showListItems(){
let searchField=document.getElementsByName("ingredientSearch")[0];
let items = document.getElementsByClassName("items");
searchField.addEventListener("keyup",function(){
if(document.getElementById("IngredientsList").hasAttribute("class","noneDisplay")){
document.getElementById("IngredientsList").removeAttribute("class","noneDisplay");
}
filterListItems(items);
})
}
function filterListItems(items){
let inputText = document.getElementsByName("ingredientSearch")[0].value.toUpperCase();
for(var i=0;i<items.length;i++){
let itemsText = items[i].textContent.toUpperCase();
if(itemsText.indexOf(inputText)==-1){
items[i].setAttribute('class','noneDisplay');
}else{
items[i].removeAttribute('class','noneDisplay');
}
}
}
showListItems();
class noneDisplay 表示 css display:none
所以我的想法是，如果我在输入中键入 apple，浏览器会将 class noneDisplay 设置为除第一个列表项之外的所有列表项。如果用户输入 Strawberry，浏览器会将类 noneDisplay 设置为除具有值 Strawberry 的列表之外的所有列表项。
但这就是我得到的
如果你能在没有 Jquery 的情况下帮助我，那将非常感谢，因为我正在尝试没有它。
最佳答案
根据您的回答，我假设您正在尝试修改元素的类。您可以利用classList用于该目的的属性(property)。我已经清理了您的一些代码并对其进行了格式化。
function showListItems() {
const searchField = document.getElementsByName("ingredientSearch")[0];
const items = document.getElementsByClassName("items");
searchField.addEventListener("keyup", function() {
const ingredientsList = document.getElementById("IngredientsList");
if (ingredientsList.classList.contains("noneDisplay")) {
ingredientsList.classList.remove("noneDisplay");
}
filterListItems(items);
});
}
function filterListItems(items) {
const inputText = document.getElementsByName("ingredientSearch")[0].value.toUpperCase();
for (let i = 0; i < items.length; i++) {
const itemsText = items[i].textContent.toUpperCase();
if (itemsText.indexOf(inputText) > -1) {
items[i].classList.remove("noneDisplay");
continue;
}
items[i].classList.add("noneDisplay");
}
}
showListItems();
正如评论中提到的，我个人认为你可以根据 items 数组过滤并映射到 ul 列表中，我认为这样更简单这样做，更容易维护，也更容易阅读。
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<body>
<input id="input" placeholder="Search..." />
<ul id="ingredients-list">
<!-- List items will be created with javascript -->
</ul>
<script>
const updateList = (items = []) => {
const list = document.getElementById("ingredients-list");
// Clear list items
while (list.firstChild) {
list.firstChild.remove();
}
if (items && Array.isArray(items) && items.length > 0) {
// Rerender with new list items
items.forEach(item => {
const listItem = document.createElement("li");
listItem.appendChild(document.createTextNode(item));
list.appendChild(listItem);
});
}
};
const handleOnChange = e => {
const { value } = e.target;
updateList(
items.filter(item => item.toUpperCase().includes(value.toUpperCase()))
);
};
const items = [
"Apple",
"Asparagus",
"Baking Powder",
"Balsamic Vinegar",
"Vinegar",
"Wheat Flour",
"White Wine"
];
updateList(items);
const input = document.getElementById("input");
input.addEventListener("keyup", handleOnChange);
</script>
</body>
</html>
使用我的方法进行工作演示:https://codesandbox.io/s/html-filter-list-nolnk?fontsize=14&hidenavigation=1&theme=dark
关于javascript - for 循环中的 setAttribute 无法按我的预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58957943/
26
4
0
request.setAttribute 和 request.getSession().setAttribute() 有什么区别？ 它们存储在哪里以及以什么格式？ 最佳答案 区别: 当您使用reque
session.setAttribute 和 request.setAttribute 有什么区别？ 最佳答案 范围，session属性住所有的session而request属性只在一个请求中 关于j
我一直热衷于重置我的一个 jsp 页面上的一些验证错误。这是一个我无法再联系到的人(死亡或无法联系)继承的项目。我有一个 jsp 页面，其中包含许多自定义标记库，其中更多页面被添加为选项卡，父页面具有
当您从请求和 getServletContext() 调用它们时，get/setAttribute() 之间有什么区别。我注意到你需要 RequestDispatcher rd = request.g
所以我正在学习操作 DOM，并且我注意到一件有趣的事情: 假设我想使用“.”设置元素的 name 属性。点符号: element.name = "someName"; console.log(docu
HttpServletRequest类的setAttribute()方法和HttpSession类的setAttribute()方法有什么区别？ 在什么情况下使用？ 最佳答案 一个在请求范围内设置一个
为什么我们要使用setAttribute()方法来设置ServletContext参数，因为我们可以通过在web.xml中设置参数并使用getInitParameter()来获取它们来完成相同的工作？
我在 setAttribute() 方面遇到问题。我已经搜索过互联网和这个网站，但他们没有解决我的问题。我想用 javascript 更改图片的宽度和高度，但它不起作用。请帮助我。
在学校，我的老师将我的代码更改为下面的示例它不起作用，我无法理解它是如何工作并修复它的。 function _$(e, attrs) { var el = document.createEle
我有三个元素，我正在尝试为每个元素设置属性: const foldable = document.getElementsByClassName('foldable') let result = Arr
我正在尝试使用 object3D.lookAt 属性更改图像的视角。目前我正在尝试使用组件的 update() 方法更改图像的方向。这是通过更新我的组件的 Lookat 属性来实现的。 functio
我有一些有效的 SVG 代码，可以通过在形状上设置属性来处理鼠标事件: function plot() { ... shape.setAttributeNS(null, "onmouseove
我使用的表单会根据您单击单选按钮的选项来显示一些 div。 问题是 div 设置为不显示，除非我选择一个选项。 所以我添加了以下函数，以确保如果显示 div，它将具有具有所需属性的形式。 所以我给出这
此代码嵌套在 ascx 控件中。 onclientclick 事件有效并且没有错误，但标签文本没有更改？我错过了什么？
同样，我在使用 setAttribute 时遵循我的引用书和在线引用:它根本不起作用； HTML:
这是一些 HTML: lorem Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque magnam expedit
我一直在以不同的方式创建元素，但不确定最佳方法。有什么区别: var myselect = document.createElement("select"); myselect.name="blah"
这里我稍微修改了代码 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementsbyname_loop 来自
我在为另一个元素设置属性时遇到问题。 我正在使用带有 JS 和 HTML 的 PHP 代码，它看起来像: $value 你一定知道我有两个元素。我用于编写文本的第一个('content')和另一个('
我是 Javascript 的新手，我不知道如何在选定的选项上使用 setAttribute。 我的 html 中有一个 id = employee 的 select 元素(使用 javascript
我是一名优秀的程序员,十分优秀！