카드를 and, or 필터로 나타내려합니다.
본문
아래 이미지와 같은 필터가 있습니다.
업종/연령대/특별 큐레이션은 and 연산,
하위 필터는 or로 연산하여 display:none,block을 하려합니다.
예)
IT클릭시
IT class를 가지고 있는 카드 display:block;
+10대 클릭 시
IT와 10대 class를 모두 가지고 있는 카드 block;
+20대 클릭 시
위 결과에 더하여, 20대 class를 가지고 있는 카드 block
형태입니다. 카드에는 각 하위 필터에 대응하는 class가 들어가 있는 상태입니다.
위 내용을 담고 있는 아티클이 있을까요?
제이쿼리나 자바스크립트를 기본도 모르고 복붙해서 사용하다보니, 어찌 찾아야할지 막막하네유 ㅠㅠ
답변 4
위 설명만으로는 상황 파악이 힘드네요.
카드가 있고,
해당 카드를 선택한 필터에따라 and, or로 display:block;을 하려합니다.
A필터 해당 카드 나타내기.
그들 중 B필터 해당 카드 나타내기.
https://api.jquery.com/hasclass/
카드 element loop 돌면서
hassClass()로 검사해서 처리해 보세요.
@엑스엠엘 감사드립니다. 확인해보겠습니다!
카드에 공통되는 클래스와 특성을 구분할 수 있는 각각의 클래스를 주시고
클릭시 공통되는 클래스로 반복문을 돌리면서 각각의 조건을 걸어주시는 방식으로 하시면 편하실 거예요
감사합니다 확인해보겠습니다!
정확히 어떤 소스인지는 잘 파악이 되지 않지만...
클래스보다는 엘레먼트 각각에 아이디를 주고 각각의 아이디를 분류별로 배열을 만들고 클릭시 배열을 concat() 하여 그렇게 합쳐진 배열 전체의 엘레먼트를 block 하거나 none 하거나 하면 될 것 같은데요.
concat 찾아보겠습니다 감사합니다
제가 시간이 없어서 전체 소스는 못 짜 드리겠고 참고만 하세요.
<script>
mode = true;
a = ["a_1", "a_2", "a_3", "a_4", "a_5"];
function myMode() {
for (i in a) this[a[i]].style.display = mode ? 'none' : 'block';
mode = !mode;
}
</script>
<div id=a_1>하나</div>
<div id=a_2>둘</div>
<div id=a_3>셋</div>
<div id=a_4>넷</div>
<div id=a_5>다섯</div>
<button style=cursor:pointer onclick=myMode()>클릭</button>
여기서 a 라는 배열 안의 내용물을 바꿔주는 이벤트를 잘 엮어주세요. 배열을 concat() 하거나 초기화하거나 등등
아이고 이렇게까지 감사합니다 ㅠㅠ
제이쿼리 end 메서드로는 대응이 어려울것같은데, 쉽지가 않네요.ㅜㅜ