클릭 이벤트에 기반한 Jquery div 필터링

user123456789

여기에 div 요소를 필터링하는 스크립트가 있습니다.

여기에서 작동 데모

HTML

<div class="nav">
<a href="#" data-category-type="4380" data-category-name="jet">4380</a>

<a href="#" data-category-type="4620" data-category-name="air">4620</a>

<a href="#" data-category-type="5000" data-category-name="india">5000</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
    <div class="hide" data-category-type="4620" data-category-name="air">4620.</div>
    <div class="hide" data-category-type="5000" data-category-name="india">5000.</div>
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
</div>

JQUERY

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();

});

여기서는 하나의 조건 (data-category-type) 만 확인하고 있습니다.

하지만 여기서는 두 가지 조건을 모두 확인하고 싶습니다

  1. 데이터 카테고리 유형
  2. 데이터 카테고리 이름

내가 이것을 어떻게 얻을 수 있습니까? 누구나 제발 도와 줄 수 있습니까?

편집 여기에 질문이 하나 더 있습니다. 모든 div 요소를 어떻게 표시 할 수 있습니까 (클릭하면)

<a href="">Show all</a>

감사합니다

아룬 P 조니

다음과 같은 조건을 하나 더 추가 할 수 있습니다.

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();

});

데모 : Fiddle

또한 확인

var divs = $('#Categories > div');
$('.nav a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var cat = $this.data('categoryType');
    var nam = $this.data('categoryName');
    divs.filter(':visible').hide();
    divs.filter('[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});

데모 : Fiddle

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

클릭 이벤트에 대한 jQuery div 드롭 다운

분류에서Dev

jQuery-앵커 태그를 기반으로 div 필터링 (클릭)

분류에서Dev

동일한 클래스 jQuery를 사용하여 클릭 이벤트에서 하나의 DIV 열기 만 표시

분류에서Dev

클릭 한 링크 attr jQuery에 따라 div 표시

분류에서Dev

: 데이터 선택기의 jQuery 클릭 이벤트

분류에서Dev

AngularJS의 클릭 기능에 대한 데이터 필터링

분류에서Dev

플러그인에서 작동하지 않는 하위 div에 대한 jquery 클릭 이벤트

분류에서Dev

클릭 이벤트에 대한 JQuery 선택기

분류에서Dev

링크 대신 div에서 클릭 이벤트 트리거

분류에서Dev

클릭 한 div에 JQuery 적용

분류에서Dev

문서에서 jquery를 사용하여 클릭 이벤트 추적기를 추가 할 때 링크의 클릭 이벤트가 작동하지 않습니다.

분류에서Dev

Jquery를 사용하여 내부 div에 대한 클릭 이벤트를 감지하는 방법

분류에서Dev

div에 대한 강조 표시 / 트리거 클릭 이벤트

분류에서Dev

클릭 이벤트에 대한 Jquery 스위치 클래스

분류에서Dev

'a'태그에 대한 jquery 트리거 클릭 이벤트

분류에서Dev

div에 클래스를 추가하면 클릭 이벤트 실행-JQuery

분류에서Dev

반응 : 클릭 이벤트를 기반으로 필터링 된 배열 항목 표시

분류에서Dev

자바 스크립트에 대한 DIV 클릭 이벤트 쌓기

분류에서Dev

Jquery DIV 내부에서 클릭 한 DIV 클래스 가져 오기

분류에서Dev

한 번의 클릭 jQuery 후 클릭 기능 복제 Div를 반복합니까?

분류에서Dev

클릭 이벤트에 대한 API 데이터 업데이트

분류에서Dev

jquery의 클릭 이벤트에 대한 if 문

분류에서Dev

클릭 이벤트에서 JQuery / bPopup 한 번만 발생

분류에서Dev

다중 클릭 이벤트에 대한 Jquery 사용 버튼

분류에서Dev

클릭 JQuery에 Div 확장

분류에서Dev

Ubuntu에서 빠른 클릭 이벤트 필터링

분류에서Dev

Ubuntu에서 빠른 클릭 이벤트 필터링

분류에서Dev

jquery를 사용한 클라이언트 측 필터링

분류에서Dev

클릭 이벤트를 기반으로 Jquery setInterval 중지

Related 관련 기사

  1. 1

    클릭 이벤트에 대한 jQuery div 드롭 다운

  2. 2

    jQuery-앵커 태그를 기반으로 div 필터링 (클릭)

  3. 3

    동일한 클래스 jQuery를 사용하여 클릭 이벤트에서 하나의 DIV 열기 만 표시

  4. 4

    클릭 한 링크 attr jQuery에 따라 div 표시

  5. 5

    : 데이터 선택기의 jQuery 클릭 이벤트

  6. 6

    AngularJS의 클릭 기능에 대한 데이터 필터링

  7. 7

    플러그인에서 작동하지 않는 하위 div에 대한 jquery 클릭 이벤트

  8. 8

    클릭 이벤트에 대한 JQuery 선택기

  9. 9

    링크 대신 div에서 클릭 이벤트 트리거

  10. 10

    클릭 한 div에 JQuery 적용

  11. 11

    문서에서 jquery를 사용하여 클릭 이벤트 추적기를 추가 할 때 링크의 클릭 이벤트가 작동하지 않습니다.

  12. 12

    Jquery를 사용하여 내부 div에 대한 클릭 이벤트를 감지하는 방법

  13. 13

    div에 대한 강조 표시 / 트리거 클릭 이벤트

  14. 14

    클릭 이벤트에 대한 Jquery 스위치 클래스

  15. 15

    'a'태그에 대한 jquery 트리거 클릭 이벤트

  16. 16

    div에 클래스를 추가하면 클릭 이벤트 실행-JQuery

  17. 17

    반응 : 클릭 이벤트를 기반으로 필터링 된 배열 항목 표시

  18. 18

    자바 스크립트에 대한 DIV 클릭 이벤트 쌓기

  19. 19

    Jquery DIV 내부에서 클릭 한 DIV 클래스 가져 오기

  20. 20

    한 번의 클릭 jQuery 후 클릭 기능 복제 Div를 반복합니까?

  21. 21

    클릭 이벤트에 대한 API 데이터 업데이트

  22. 22

    jquery의 클릭 이벤트에 대한 if 문

  23. 23

    클릭 이벤트에서 JQuery / bPopup 한 번만 발생

  24. 24

    다중 클릭 이벤트에 대한 Jquery 사용 버튼

  25. 25

    클릭 JQuery에 Div 확장

  26. 26

    Ubuntu에서 빠른 클릭 이벤트 필터링

  27. 27

    Ubuntu에서 빠른 클릭 이벤트 필터링

  28. 28

    jquery를 사용한 클라이언트 측 필터링

  29. 29

    클릭 이벤트를 기반으로 Jquery setInterval 중지

뜨겁다태그

보관