리스트에서 쉬프트 클릭하고 클릭하면 그 사이 다 클릭되게하는것
본문
리스트에서 쉬프트 클릭하고 클릭하면 그 사이 다 클릭되게하는것이 궁금합니다
ctrl로 클릭하는건
if(e.ctrlKey) {
$(this).toggleClass("on");
}
css:
.on{
backgroun-color:yellow
}
이런식으로 하고 클릭하면 class ="on" 되서 바탕화면이 노란색이 되는데
쉬프트로 하면
그 사이값을 어떻게 가져와서 전부다 class를 붙여주는지 모르겠습니다.
고견 부탁드립니다.
답변 1
이벤트는 e.shiftKey를 사용하시면되고, shift를 누른 위치를 저장하게 하고 그 위치가 2개면 그 사이를 전부 class=on으로 처리 하시면 될것 같습니다.
저 같으면 클릭하는 것들에 data-list='1' ~ data-list='10'이런식으로 숫자를 줘서 위치가 어디인지 판단하기 쉽게 만들것 같습니다.
그래서 shift를 누르고 클릭한게 2개 이상인지 체크하고 data의 값이 해당 위치에 있는 사이값인거는 전부 class on 처리하면 해결될것 같네요.
더 좋은 방법도 많겠지만...그냥 단순히 해야하는것들 나열한대로 정리하면 위와 같습니다.
data-list='1' ~ data-list='10'
이걸 준다는건 class 명이 data-list 이고 값이 1~ 10이라는뜻인가요?
아뇨 class는 아니고 data속성을 이용해서 이름을 지어준 것입니다.
https://www.w3schools.com/tags/att_global_data.asp
만약 <div class='test' data-list=1>aaaa</div>로 했을 경우 jQuery로 접근하는 것은 $('.test').data('list');
이렇게 하시면 1이라는 값이 나올 것입니다.