根據卡片內的內容過濾引導卡片的可見性

我無法弄清楚可能很簡單的事情。我有一個網格，卡片看起來像這樣：

<div class="card">
  <img src="data:image/jpg;base64,{{ books[book]['cover']}}" class="card-img-top" alt="...">
  <div class="card-img-overlay">
    <span class="title"><h5 class="bg-dark text-white">{{ book }}</h5></span>
    <span class="author"><h5 class="bg-dark text-white author">{{ books[book]['author'] }}</h5>
  </div>
</div>

我有一個名為的輸入欄位search-authors，并且想要隱藏不包含任何值的卡片search-authors。

我正在嘗試使用這個：

            $("#search-authors").on("keyup", function() {
              var value = $(this).val().toLowerCase();
                $(".card *").filter(function() {
                  $(".card").css('display', 'none')
                  .filter(':contains('   value   ')')
                  .css('display', 'block');
                });
            });

這不像我期望的那樣作業。例如，僅鍵入僅c顯示包含c但鍵入co的卡片會隱藏包含co且確實顯示正確鍵入 just 的卡片c。

任何指標將不勝感激！

謝謝

uj5u.com熱心網友回復：

There's a couple of issues in your code.

• You need to select the .card elements, not their child elements, and hide/show them directly.
• Use the input event instead of keyup. The former allows people to paste content in with the mouse, the latter does not.
• You don't need to nest the filter() calls.
• You're using filter() like a loop, which is unnecessary. Call filter() directly on the .card collection and update the matching elements from there.
• :contains is case-sensitive by default, so converting the input to lowercase isn't enough. However, you can implement your own case-insensitive version of :contains (credit @HighwayOfLife in this answer)

With all that said, try this:

$.expr[':'].icontains = (a, i, m) => $(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;

$("#search-authors").on("input", e => {
  $(".card").hide().filter(`:icontains(${e.target.value.trim()})`).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" id="search-authors" />
<div class="card">
  <img src="data:image/jpg;base64,{{ books[book]['cover']}}" class="card-img-top" alt="...">
  <div class="card-img-overlay">
    <span class="title"><h5 class="bg-dark text-white">ABC Book 1</h5></span>
    <span class="author"><h5 class="bg-dark text-white author">DEF Author 1</h5></span>
  </div>
</div>
<div class="card">
  <img src="data:image/jpg;base64,{{ books[book]['cover']}}" class="card-img-top" alt="...">
  <div class="card-img-overlay">
    <span class="title"><h5 class="bg-dark text-white">ABC Book 2</h5></span>
    <span class="author"><h5 class="bg-dark text-white author">DEF Author 2</h5></span>
  </div>
</div>
<div class="card">
  <img src="data:image/jpg;base64,{{ books[book]['cover']}}" class="card-img-top" alt="...">
  <div class="card-img-overlay">
    <span class="title"><h5 class="bg-dark text-white">UVW Book 1</h5></span>
    <span class="author"><h5 class="bg-dark text-white author">XYZ Author 1</h5></span>
  </div>
</div>
<div class="card">
  <img src="data:image/jpg;base64,{{ books[book]['cover']}}" class="card-img-top" alt="...">
  <div class="card-img-overlay">
    <span class="title"><h5 class="bg-dark text-white">UVW Book 2</h5></span>
    <span class="author"><h5 class="bg-dark text-white author">XYZ Author 2</h5></span>
  </div>
</div>

標籤：

上一篇：保存的日期時間與我在輸入時選擇的不同

下一篇：未處理的承諾拒絕：錯誤：資料庫表錯誤：本機反應中未定義