"ctrl + a + backspace"でテキストを削除すると、入力が空であることが検出されない

Question

jQueryと入力フィールドで簡単にdivフィルタリングを実行しています。 "Ctrl + + バックスペース"を使用して入力を削除すると、つまり、すべてのテキストを選択して削除すると、空であることが検出されません。この原因は何ですか？

キーボードコマンドを使用している場合は、デフォルトに戻すdivsは戻っていませんが、バックスペースすべての文字の場合は通常に戻ります。

これは私がそれを行う方法です。

$('#brandSearch').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis.length == 0) { 
     $('.card').show(); 
    } else { 
     $('.card').each(function() { 
      var text = $(this).text().toLowerCase(); 
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide(); 
     }); 
    }; 
}); 

Answer 1

空の文字列を扱うあなたのifブロックが表示されていませんブロックが隠すのと同じ要素です。 elseブロックは.parent()を呼び出しますが、ifブロックはコールしません。

だからelse場合を示しているか、各.card要素の親を隠しますが、if場合は、両親を非表示解除せずに.card要素自体— を示しています。それが空でない文字列の場合は正しく動作しているように、それだけの問題であるべき聞こえるので

$('#brandSearch').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis.length == 0) { 
     // Show all of the .card elements 
     $('.card').show(); 
    } else { 
     $('.card').each(function() { 
      var text = $(this).text().toLowerCase(); 
      // Show or hide the *parent* of this .card element 
      text.indexOf(valThis) >= 0 ? 
       $(this).parent().show() : 
       $(this).parent().hide(); 
     }); 
    }; 
}); 

：私のコメントは、コード（私も明確にするためelseで条件式を再フォーマット）に追加を参照してください。それは他の人と一致するようにifブロックで.parent()を追加：

$('#brandSearch').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis.length == 0) { 
     // Show the parent of each .card element 
     $('.card').parent().show(); 
    } else { 
     // Show or hide the parent of each .card element 
     $('.card').each(function() { 
      var text = $(this).text().toLowerCase(); 
      text.indexOf(valThis) >= 0 ? 
       $(this).parent().show() : 
       $(this).parent().hide(); 
     }); 
    }; 
}); 

これは、ブラウザのデバッグツールに精通は大きな時間をオフに支払うことになる状況の一種です。 .show()または.hide()メソッドはDOMを操作し、DOMインスペクタを使用することでどの要素が隠れて表示されているかを簡単に確認できます。

実際、学習の練習として、元のコードに戻って一時的にバグを解消し、DOMインスペクタを開いて問題がどのように現れているかを確認することをおすすめします。そこにいる間に、JavaScriptデバッガなどのツールも試してみてください。

Chromeをお使いの場合は、introduction to the Chrome Developer Toolsです。他のブラウザにも同様のツールとドキュメントがあります。

Answer 2

それはうまく動作しているようだ：

$('#brandSearch').keyup(function() { 
 
    var valThis = $(this).val().toLowerCase(); 
 
    if (valThis.length == 0) { 
 
     $('.card').show(); 
 
     console.log("input is empty"); 
 
    } else { 
 
     console.log("input is not empty");     
 
     $('.card').each(function() { 
 
      var text = $(this).text().toLowerCase(); 
 
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide(); 
 
     }); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="brandSearch">