ホームページ > 記事 > ウェブフロントエンド > jqueryでフィルタリング機能を実装する方法
jqueryでフィルタリング機能を実装する方法
- 藏色散人オリジナル
- 2021-11-22 11:06:033436ブラウズ
jquery がフィルタリング関数を実装する方法: 1. jquery の appendTo を使用して、クリックされた要素をリストに追加します; 2. jquery の clone 関数を使用して、属性リスト内のコンテンツを直接削除します。
この記事の動作環境: Windows7 システム、jquery3.2.1、Dell G3 コンピューター。
jquery でフィルタリング関数を実装するにはどうすればよいですか?
jquery はフィルタリング機能を実装します。
製品属性のフィルタリング
製品属性のフィルタリングは非常に一般的な機能であり、通常は同じタイプの属性を 1 つだけ選択できます。たとえば、価格帯やブランドなど、選択内容をより直感的に見えるようにするために、選択項目は通常リスト化され、クリックすると選択が解除され、クリックすると同じ種類を置き換える機能が備わっています。
2 つの完全な実装を以下に示します。
実装 1:
jquery の appendTo を使用して、クリックされた要素をリスト項目に追加します (リスト項目に同じ型の要素があるかどうかを確認しながら)元のリストに戻るように置き換えます),
リスト項目内の要素をクリックして元の div に戻ります。元の div に戻るために、ここではカスタム属性を使用します。
もちろん、この実装にはいくつかの問題があり、div のクラスは親要素の id と同じに制限されるため、この状況は非常に不便です。イベント、再帰のたびに再バインドする必要があります。
よりシンプルで明確な 2 番目のアイデアを見てみましょう。効率が向上し、ID とクラスが同じである必要がなく、複数のイベントを再バインドする必要もありません
<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<style type="text/css">
.class1,.class2{
width: 100px;
height: 40px;
margin: 10px;
}
#count{
background-color: sandybrown;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div id='class1'>
<button class="class1" data-belong="class1">皮鞋</button>
<button class="class1" data-belong="class1">凉鞋</button>
<button class="class1" data-belong="class1">拖鞋</button>
</div>
<div id="class2">
<button class="class2" data-belong="class2">手套</button>
<button class="class2" data-belong="class2">皮手套</button>
<button class="class2" data-belong="class2">毛手套</button>
</div>
<div id="count"></div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
(function check(){
$('#class1> button,#class2>button').off("click").on("click",function(){
$("#count button."+$(this).attr("data-belong")).appendTo("#"+$(this).attr("data-belong"));
$(this).appendTo("#count");
check()
})
$('#count button').off("click").on("click",function(){
$(this).appendTo("#"+$(this).attr("data-belong"))
check()
})
})()
</script>実装 2:jqueryのクローン機能を利用すると、元のリストを変更する必要がなく、属性リストの内容をクリックして直接削除するだけでよく、idやクラスを一致させる必要がありません。
もっと自由に。コードが削減され、再帰がなく、データの変更やバインディングの問題もありません。実装よりもはるかに最適化されています 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.class1,.class2{
width: 100px;
height: 40px;
margin: 10px;
}
#count{
background-color: sandybrown;
width: 400px;
height: 200px;
}
</style>
<body>
<div>
<button class="class1" data-belong="class1">皮鞋</button>
<button class="class1" data-belong="class1">凉鞋</button>
<button class="class1" data-belong="class1">拖鞋</button>
</div>
<div>
<button class="class2" data-belong="class2">手套</button>
<button class="class2" data-belong="class2">皮手套</button>
<button class="class2" data-belong="class2">毛手套</button>
</div>
<div class="count">
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//只需保持 button 的 class 标志 和data-belong 一致即可。
$("div:lt(2) button").click(function(){
$("div.count ."+$(this).attr('data-belong')).remove();
$(this).clone().appendTo("div.count");
$('.count button').off("click").on("click",function(){
$(this).remove();
})
})
</script>推奨学習: "
jquery ビデオ チュートリアル以上がjqueryでフィルタリング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。