Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/377.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/sharepoint/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用JavaScript筛选标记的搜索属性_Javascript_Html - Fatal编程技术网

使用JavaScript筛选标记的搜索属性

使用JavaScript筛选标记的搜索属性,javascript,html,Javascript,Html,我有一个带有搜索框的图像库。当我在搜索框中键入时,我希望搜索是在数据标题属性上进行的,即“字段的良好视图”而不是在alt属性上进行的。下面的代码可以工作,但它搜索标签的innerHTML,而不是数据标题属性。具体来说,如何使其仅搜索特定属性。 函数myFunction(){ var输入、滤波器、ul、li、a、i; 输入=document.getElementById(“myInput”); filter=input.value.toUpperCase(); ul=document.getEle

我有一个带有搜索框的图像库。当我在搜索框中键入时,我希望搜索是在
数据标题
属性上进行的,即“字段的良好视图”而不是在
alt
属性上进行的。下面的代码可以工作,但它搜索标签的
innerHTML
,而不是
数据标题
属性。具体来说,如何使其仅搜索特定属性。
函数myFunction(){
var输入、滤波器、ul、li、a、i;
输入=document.getElementById(“myInput”);
filter=input.value.toUpperCase();
ul=document.getElementById(“图库”);
li=ul.getElementsByTagName(“li”);
对于(i=0;i-1){
李[i].style.display=“”;
}否则{
li[i].style.display=“无”;
}
}
}


您可以使用
.getAttribute()
函数过滤特定属性,该函数返回该属性的值。在本例中,您使用
a.getAttribute(“数据标题”).toUpperCase()
,然后根据该函数过滤结果,例如:

函数myFunction(){
var输入、滤波器、ul、li、a、i;
输入=document.getElementById(“myInput”);
filter=input.value.toUpperCase();
ul=document.getElementById(“图库”);
li=ul.getElementsByTagName(“li”);
对于(i=0;i-1){
李[i].style.display=“”;
}否则{
li[i].style.display=“无”;
}
}
}
myFunction()


您可以使用
.getAttribute()
函数过滤特定属性,该函数返回该属性的值。在本例中,您使用
a.getAttribute(“数据标题”).toUpperCase()
,然后根据该函数过滤结果,例如:

函数myFunction(){
var输入、滤波器、ul、li、a、i;
输入=document.getElementById(“myInput”);
filter=input.value.toUpperCase();
ul=document.getElementById(“图库”);
li=ul.getElementsByTagName(“li”);
对于(i=0;i-1){
李[i].style.display=“”;
}否则{
li[i].style.display=“无”;
}
}
}
myFunction()


因为您在HTML源代码中硬编码了onkeyup事件,我建议您添加以下两个参数:

  • 这个:当前元素
  • 事件:事件对象
更改为:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for caption" title="Type in a name">


因为您在HTML源代码中硬编码了onkeyup事件,我建议您添加以下两个参数:

  • 这个:当前元素
  • 事件:事件对象
更改为:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for caption" title="Type in a name">


您是否检查了innerHTML中的实际内容?如果是,请共享。因为
数据标题
属性位于
a
标记上,而不是
innerHTML
中,就像
alt
属性是。。。如果要搜索属性的值,请获取属性的值。请尝试使用
querySelectorAll
。。。谢谢您提供的信息。您是否查看了innerHTML中的实际内容?如果是,请共享。因为
数据标题
属性位于
a
标记上,而不是
innerHTML
中,就像
alt
属性是。。。如果要搜索属性的值,请获取属性的值。请尝试使用
querySelectorAll
。。。谢谢你的信息谢谢你的代码工作得很好我真的很感激谢谢你的代码工作得很好我真的很感激你的代码工作得很好谢谢你的快速响应谢谢你的代码工作得很好谢谢你的快速响应