카드를 and, or 필터로 나타내려합니다. 채택완료
아래 이미지와 같은 필터가 있습니다.
업종/연령대/특별 큐레이션은 and 연산,
하위 필터는 or로 연산하여 display:none,block을 하려합니다.
예)
IT클릭시
IT class를 가지고 있는 카드 display:block;
+10대 클릭 시
IT와 10대 class를 모두 가지고 있는 카드 block;
+20대 클릭 시
위 결과에 더하여, 20대 class를 가지고 있는 카드 block
형태입니다. 카드에는 각 하위 필터에 대응하는 class가 들어가 있는 상태입니다.
위 내용을 담고 있는 아티클이 있을까요?
제이쿼리나 자바스크립트를 기본도 모르고 복붙해서 사용하다보니, 어찌 찾아야할지 막막하네유 ㅠㅠ
답변 4개
답변에 대한 댓글 3개
카드 element loop 돌면서
hassClass()로 검사해서 처리해 보세요.
댓글을 작성하려면 로그인이 필요합니다.
정확히 어떤 소스인지는 잘 파악이 되지 않지만...
클래스보다는 엘레먼트 각각에 아이디를 주고 각각의 아이디를 분류별로 배열을 만들고 클릭시 배열을 concat() 하여 그렇게 합쳐진 배열 전체의 엘레먼트를 block 하거나 none 하거나 하면 될 것 같은데요.
답변에 대한 댓글 3개
<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() 하거나 초기화하거나 등등
댓글을 작성하려면 로그인이 필요합니다.
카드에 공통되는 클래스와 특성을 구분할 수 있는 각각의 클래스를 주시고
클릭시 공통되는 클래스로 반복문을 돌리면서 각각의 조건을 걸어주시는 방식으로 하시면 편하실 거예요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
해당 카드를 선택한 필터에따라 and, or로 display:block;을 하려합니다.
A필터 해당 카드 나타내기.
그들 중 B필터 해당 카드 나타내기.