javascript - 使用 JavaScript 过滤标签的搜索属性

Question

我有一个带有搜索框的图片库。当我在搜索框中输入内容时，我希望在 data-title 属性上进行搜索，特别是即“字段的绝佳 View ” 不在 alt 属性上。下面的代码可以工作，但它搜索标签的 innerHTML ，而不是专门搜索 data-title 属性，如何使其仅搜索特定属性。

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("gallery");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";

    }
  }
}

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

<ul id="gallery">

  <li>
    <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"><img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a>
  </li>

  <li>
    <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a>
  </li>

  <li>
    <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a>
  </li>

Answer 1

您可以使用 .getAttribute() 函数过滤特定属性，在本例中您使用 a.getAttribute("data-title")，该函数返回该属性的值.toUpperCase()，然后以此过滤结果，例如:

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("gallery");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.getAttribute("data-title").toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
myFunction()

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

<ul id="gallery">

  <li>
    <a href="image/photos/01.jpg" data-lightbox="image-1" data-title="A Great view of fields"><img class="thumb" src="image/photos/thumbnails/01.jpg" alt="Field"></a>
  </li>

  <li>
    <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a>
  </li>

  <li>
    <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a>
  </li>


  <li>
    <a href="image/photos/02.jpg" data-lightbox="image-1" data-title="We are close to the land"><img class="thumb" src="image/photos/thumbnails/02.jpg" alt="Sea"></a>
  </li>


  <li>
    <a href="image/photos/03.jpg" data-lightbox="image-1" data-title="Great field for grazing cows."><img class="thumb" src="image/photos/thumbnails/03.jpg" alt="Green fields"></a>
  </li>

希望这有帮助!