javascript - 在 href 中搜索包含特定 keyord 的元素并隐藏其他元素（在 JavaScript 中）

Question

我正在尝试为用户输入关键字的网页制作搜索框，我的代码在所有元素的 href 中搜索该关键字，并隐藏所有那些在其 href 中不包含该关键字的元素。

我尝试了一个 JavaScript 代码，它读取 href 中的文本并读取搜索框中的文本，然后检查搜索框中的文本是否是 href 中字符串的子字符串。我已经使用 java Script 的 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>

score 0 · Accepted Answer

好吧试试这个，看起来很酷，而且工作正常

<html>
  <head>
    <style>
      .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;
      }
  </style> 
  </head>
  
  <body style="margin:0; background-color:yellow;">
      <input type="text" id="searchtext" placeholder="search here" />
      <button class="toclick" onclick="MyFunction()">Click</button>
      <div class="back" id="back">
          <a href="1-spiderman-far-from-home.html">
            <div class="linkbox" style="background:url('https://upload.wikimedia.org/wikipedia/en/b/bd/Spider-Man_Far_From_Home_poster.jpg'); background-size:100% 100%;">
              <div class="text"></div></div>
          </a>
          <a href="2-Aladdin-2019.html">
            <div class="linkbox" style="background:url('https://images-na.ssl-images-amazon.com/images/I/91A0Svq4X0L._SY445_.jpg'); background-size: 100% 100%;">
              <div class="text"></div>
            </div>
          </a>
          <a href="3-venom-2018.html">
            <div class="linkbox" style="background:url('https://upload.wikimedia.org/wikipedia/en/thumb/a/a6/Venom_%28soundtrack%29.jpg/220px-Venom_%28soundtrack%29.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('https://upload.wikimedia.org/wikipedia/en/thumb/e/ee/Alita_Battle_Angel_%282019_poster%29.png/220px-Alita_Battle_Angel_%282019_poster%29.png'); background-size:100% 100%;">
              <div class="text"></div>
            </div>
          </a>
          <a href="5-Antman-and-the-wasp.html">
            <div class="linkbox" style="background:url('https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fmarkhughes%2Ffiles%2F2018%2F06%2FANT-MAN-AND-THE-WASP-new-poster-1200x1777.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('https://m.media-amazon.com/images/M/MV5BZjFiMGUzMTAtNDAwMC00ZjRhLTk0OTUtMmJiMzM5ZmVjODQxXkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_UX182_CR0,0,182,268_AL_.jpg'); background-size:100% 100%;">
              <div class="text"></div>
            </div>
          </a>
      </div>
  </body>
  <script>
          function MyFunction(){
            var searchtxt = document.getElementById("searchtext").value;
            var value = document.getElementById("back").getElementsByTagName("a");

            for(i = 0; i < value.length; i++){
              var txtvalue = value[i].href.toUpperCase();
              if(txtvalue.includes(searchtxt.toUpperCase())){
                    value[i].style.display="";
                }
                else{
                  value[i].style.display="none"
                }
            }
          }
  
          </script>
  
  </html>

score 0 · Accepted Answer

<html>
<head>
    <style>
    .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;
    }
</style> 
</head>

<body style="margin:0; background-color:yellow;">
    <input type="text" id="searchtext" placeholder="search here" />
    <button class="toclick" onclick="MyFunction()">Click</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>
    </div>
</body>
<script>
        function MyFunction(){
                var  value, txtvalue, i, searchtxt;
                searchtxt=document.getElementById("searchtext").value.toUpperCase();
                value = document.getElementById("back").getElementsByTagName("a");

                for(i=0; i <value.length ; i++){
                    txtvalue = value[i].href.toUpperCase();
                    if(txtvalue.includes(searchtxt))
                    {
                        value[i].style.display="";

                    }
                    else{
                        value[i].style.display="none"
                    }
                }

        }

        </script>

</html>

score 0 · Accepted Answer

您的代码中有一些错误。

getElementsByTagName不使用getElementByTagName
toUpperCase()不使用toUpperCase
a.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 中搜索包含特定 keyord 的元素并隐藏其他元素（在 JavaScript 中）

3 回答 3

Related

Reference