2017-11-20 6 views
0

私は検索入力フィールドとテーブルを持っています。いくつかの単語を入力すると、入力した単語に一致する行がテーブルに表示されます。私はW3Schoolの例を見ました。彼らは私が実際に理解していないfilter()の中でJQueryのtoggle()を使います。このfilter()内でJQueryトグル()を使用する目的は何ですか?

HTMLのようなコードが

<input class='form-control' id='myInput' type='text' placeholder='Search.....'> 
<table> 
    <thead> 
     table header...... 
    </thead> 
    <tbody id='myTable'> 
     here goes 4 rows 
    </tbody> 
</table> 

JS

$(document).ready(function(){ 
$('#myInput').on('keyup', function(){ 
    var value = $(this).val().toLowerCase(); 
    $('#myTable tr').filter(function(){ 
     $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); 
    }); 
}); 
}); 

誰でもフィルタ()関数内のコードの行を説明できますか?それの目的は何で、どのように機能するのですか?ありがとう!

答えて

3

これは実際にコールバックの条件に基づいてコレクションを減らすために使用されるフィルタの不適切な使用です。彼らは実際にどのフィルタリング

Aまったく同じことをやってeachfilterを交換するような方法を理解することがより適切かつ容易に行うために、単に<tr>の各インスタンスを分離ループを作成するためにそれを使用し、任意の基準を提供していない

$(document).ready(function() { 
    $('#myInput').on('keyup', function() { 
    var value = $(this).val().toLowerCase(); 
    $('#myTable tr').each(function() { 
     $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); 
    }); 
    }); 
}); 
+0

ありがとうございました。代わりにそれぞれを使用する方がはるかに理にかなっています! –

0
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); 

上記のコードを非表示と入力値のユーザに基づいて、テーブルの行は、入力フィールドに入力示します。

jquery toggle()関数html要素を非表示にして表示します。

indexOf(value)指定された値の文字列を検索するために使用される関数です。

+1

ありがとうございます。私が混乱しているのは、filter()内にtoggle()を置く理由です。 –

+0

@BoHuangあなたを歓迎します:) – SamaBalaYam

関連する問題