javascript - 如何使用 javascript 创建图像和文本的搜索栏

Question

我想创建一个从页面中过滤掉 div 的搜索栏。我试图创建一个，但它只会过滤掉 div 中的文本并使图像消失。

我的Javascript：

    $(document).ready(function(){
  $("#articleSearchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#card *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

我的 HTML：

<input type="text" id="articleSearchInput" placeholder="Search For Blalala......">

<div class="card mt-4" id="card">
        <div class="card-body">

        <img src="myimgpath" id="articleImage" alt="loremipsum0" />

        <p class="card-title">Blalala</p>

        <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>

<div class="card mt-4" id="card">
        <div class="card-body">

        <img src="myimgpath" id="articleImage" alt="loremipsum1" />

        <p class="card-title">Blalala</p>

        <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>

<div class="card mt-4" id="card">
        <div class="card-body">

        <img src="myimgpath" id="articleImage" alt="loremipsum2" />

        <p class="card-title">Blalala</p>

        <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>

有什么办法可以让这个搜索栏同时处理图像和文本？

提前致谢。
如果我必须在问题中添加更多信息，请告诉我。

标签： javascripthtmljquerysearchbar

Answer 1

这应该可以解决问题：

我不知道你是否注意到，但你在每张卡片上都缺少结束 div，所以我先添加了它，然后我将你的卡片标题的值更改为 bala、bolo、bili，以检查每张卡片是否彼此不同然后我添加了这行代码：
if (value == "bala") { $("#articleImage1").show(); } 也就是说，如果值等于“bala”（这是您的卡片标题），那么我将显示带有$("#articleImage1").show();

现在取决于您如何操纵其他值。

var val = $.trim(this.value);
if (val === "")
  $('img').show();
else {
  $('img').hide();
  $("img[alt*=" + val + "]").show();
}

$(document).ready(function() {
  $("#articleSearchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#card *").filter(function() {

      if (value == "bala") {
        $("#articleImage1").show();
      }
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="articleSearchInput" placeholder="Search For Blalala......">

<div class="card mt-4" id="card">

    <div class="card-body">

      <img src="myimgpath" id="articleImage1" alt="loremipsum0" />

      <p class="card-title">bala</p>

      <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>
  </div>



<div class="card mt-4" id="card">

    <div class="card-body">

      <img src="myimgpath" id="articleImage" alt="loremipsum1" />

      <p class="card-title">bolo</p>

      <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>
  </div>



<div class="card mt-4" id="card">

    <div class="card-body">

      <img src="myimgpath" id="articleImage" alt="loremipsum2" />

      <p class="card-title">bili</p>

      <div class="card-text mb-2" id="cardDescription">Lorem Ipsum</div>
    </div>
  </div>