我正在尝试为用户键入关键字的网页制作搜索框，我的代码在所有元素的 href 中搜索该关键字，并隐藏所有在其 href 中不包含该关键字的元素。
我尝试了一个 JavaScript 代码，它读取 href 中的文本，也读取搜索框中的文本，然后检查搜索框中的文本是否是 href 中字符串的子字符串。我使用 java 脚本的 indexOf 函数来检查子字符串
此代码应显示那些在其 href 中包含关键字的元素，并隐藏那些在其 href 中不包含此关键字的元素。 相反，什么也没有发生。
function MyFunction() {
var container, value, txtvalue, i, searchtxt, get;
get = document.getElementById("searchtext");
searchtxt = get.value.toUpperCase();
container = document.getElementById("back");
value = container.getElementByTagName("a");
for (i = 0; i < value.length; i++) {
txtvalue = value[i].href;
if (txtvalue.toUpperCase.indexOf(searchtxt) > -1) {
value.style.display = "";
} else {
a.style.display = "none"
}
}
}.back {
width: 100%;
height: 625px;
}
.linkbox {
width: 11%;
height: 34%;
background-color: green;
top: 4%;
display: inline-block;
border: 1px solid black;
margin-left: 2.5%;
margin-top: 4%;
left: 3.5%;
box-shadow: 0px 20px 10px -8px black;
border-radius: 12px;
}
.text {
width: 100%;
top: 50%;
position: relative;
text-align: center;
font-size: 100%;
overflow: hidden;
}<body style="margin:0; background-color:yellow;">
<input type="text" id="searchtext" placeholder="search here" />
<button class="toclick" onclick="MyFunction()"></button>
<div class="back" id="back">
<a href="1-spiderman-far-from-home.html">
<div class="linkbox" style="background:url('images0.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="2-Aladdin-2019.html">
<div class="linkbox" style="background:url('images1.jpg'); background-size: 100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="3-venom-2018.html">
<div class="linkbox" style="background:url('images2.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="4-Alita-battle-angel-2019.html">
<div class="linkbox" style="background:url('images3.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="5-Antman-and-the-wasp.html">
<div class="linkbox" style="background:url('images4.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="6-Fantastic-beasts-crime-of-grindelwald-2019.html">
<div class="linkbox" style="background:url('images5.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>最佳答案
您的代码中存在一些错误。
使用
getElementsByTagName而不是getElementByTagName使用
toUpperCase()而不是toUpperCasea.style.display应该是value[i].style.display
演示
function MyFunction() {
var container, value, txtvalue, i, searchtxt, get;
get = document.getElementById("searchtext");
searchtxt = get.value.toUpperCase();
container = document.getElementById("back");
value = container.getElementsByTagName("a");
for (i = 0; i < value.length; i++) {
txtvalue = value[i].href;
console.log(txtvalue)
if (txtvalue.toUpperCase().indexOf(searchtxt) > -1) {
value[i].style.display = "";
} else {
value[i].style.display = "none"
}
}
}.back {
width: 100%;
height: 625px;
}
.linkbox {
width: 11%;
height: 34%;
background-color: green;
top: 4%;
display: inline-block;
border: 1px solid black;
margin-left: 2.5%;
margin-top: 4%;
left: 3.5%;
box-shadow: 0px 20px 10px -8px black;
border-radius: 12px;
}
.text {
width: 100%;
top: 50%;
position: relative;
text-align: center;
font-size: 100%;
overflow: hidden;
}<body style="margin:0; background-color:yellow;">
<input type="text" id="searchtext" placeholder="search here" />
<button class="toclick" onclick="MyFunction()">Search</button>
<div class="back" id="back">
<a href="1-spiderman-far-from-home.html">
<div class="linkbox" style="background:url('images0.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="2-Aladdin-2019.html">
<div class="linkbox" style="background:url('images1.jpg'); background-size: 100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="3-venom-2018.html">
<div class="linkbox" style="background:url('images2.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="4-Alita-battle-angel-2019.html">
<div class="linkbox" style="background:url('images3.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="5-Antman-and-the-wasp.html">
<div class="linkbox" style="background:url('images4.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>
<a href="6-Fantastic-beasts-crime-of-grindelwald-2019.html">
<div class="linkbox" style="background:url('images5.jpg'); background-size:100% 100%;">
<div class="text"></div>
</div>
</a>关于javascript - 在 href 中搜索包含特定关键字的元素并隐藏其他元素(在 JavaScript 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57849332/