테스트 사이트 - 개발 중인 베타 버전입니다

리스트에서 쉬프트 클릭하고 클릭하면 그 사이 다 클릭되게하는것 채택완료

rlawhd 6년 전 조회 2,148

리스트에서 쉬프트 클릭하고 클릭하면 그 사이 다 클릭되게하는것이 궁금합니다

 

ctrl로 클릭하는건

 

</p>

<p>  if(e.ctrlKey) {

    $(this).toggleClass("on");

  }</p>

<p> </p>

<p>css:</p>

<p>.on{</p>

<p>backgroun-color:yellow</p>

<p>}</p>

<p>

 

이런식으로 하고 클릭하면 class ="on" 되서 바탕화면이 노란색이 되는데

 

쉬프트로 하면

 

그 사이값을 어떻게 가져와서 전부다 class를 붙여주는지 모르겠습니다.

 

고견 부탁드립니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

이벤트는 e.shiftKey를 사용하시면되고, shift를 누른 위치를 저장하게 하고 그 위치가 2개면 그 사이를 전부 class=on으로 처리 하시면 될것 같습니다.

 

저 같으면 클릭하는 것들에 data-list='1' ~ data-list='10'이런식으로 숫자를 줘서 위치가 어디인지 판단하기 쉽게 만들것 같습니다.

그래서 shift를 누르고 클릭한게 2개 이상인지 체크하고 data의 값이 해당 위치에 있는 사이값인거는 전부 class on 처리하면 해결될것 같네요.

 

더 좋은 방법도 많겠지만...그냥 단순히 해야하는것들 나열한대로 정리하면 위와 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

r
rlawhd
6년 전
data-list='1' ~ data-list='10'

이걸 준다는건 class 명이 data-list 이고 값이 1~ 10이라는뜻인가요?
하이바네
6년 전
아뇨 class는 아니고 data속성을 이용해서 이름을 지어준 것입니다.



https://www.w3schools.com/tags/att_global_data.asp



만약 <div class='test' data-list=1>aaaa</div>로 했을 경우 jQuery로 접근하는 것은 $('.test').data('list');



이렇게 하시면 1이라는 값이 나올 것입니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인