jquery에서 필터링 기능을 구현하는 방법
- 藏色散人원래의
- 2021-11-22 11:06:033456검색
jquery에서 필터링 기능을 구현하는 방법: 1. jquery의appendTo를 사용하여 클릭한 요소를 목록에 추가합니다. 2. jquery의 clone 기능을 사용하여 속성 목록의 콘텐츠를 직접 제거합니다.
이 문서의 운영 환경: Windows 7 시스템, jquery3.2.1, Dell G3 컴퓨터.
jquery에서 필터링 기능을 구현하는 방법은 무엇입니까?
jquery는 필터링 기능을 구현합니다.
제품 속성 필터링
제품 속성 필터링은 매우 일반적인 기능으로, 일반적으로 동일한 유형의 속성 하나만 선택할 수 있습니다. 예를 들어 가격대나 브랜드 등은 선택된 컨텐츠를 좀 더 직관적으로 보이게 하기 위해 선택항목을 일반적으로 나열하고, 클릭하면 선택을 취소하고 클릭하면 같은 종류를 바꾸는 기능을 가지고 있습니다.
아래에는 두 가지 완전한 구현이 나와 있습니다.
구현 1:
jquery의 AppendTo를 사용하여 클릭한 요소를 목록 항목에 추가합니다. (동시에 목록 항목에 동일한 유형의 요소가 있는지 확인하고, 있으면 교체하여 반환되도록 합니다. 원본 목록으로),
원본 div로 돌아가려면 목록 항목의 요소를 클릭하세요. 여기서는 원본 div를 반환하는 데 사용자 정의 속성이 사용됩니다.
당연히 이 구현에는 특정 문제가 있습니다. div의 클래스가 상위 요소의 ID와 동일하도록 제한되므로 이 상황은 매우 불편합니다.
그리고 매번 모든 이벤트를 다시 바인딩해야 합니다. , 이는 재귀입니다. 효율성이 부족합니다.
더 간단하고 명확한 두 번째 아이디어를 살펴보겠습니다. 효율성이 높아지고 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!