JavaScript-30-Day-10
15183 단어 webdevgithubjavascripthtml
Shift 키를 누른 채 확인란을 선택합니다.
✨ 데모
오늘 블로그를 시작하기 전에, 나는 줄곧 나의 블로그를 읽고 지지해 준 모든 사람들에게 감사를 드리고 싶다.이것은 내가 dev.to와 나의 열 번째 블로그에서 열흘째 되는 날이다. 내가 얻은 지지는 내가 상상하지 못했던 것이다.이 블로그를 읽어주신 모든 분들께 다시 한 번 감사드립니다.
오늘 우리는 아주 유용한 일을 했다. 흔히 볼 수 있는 레이아웃을 전자 우편 클라이언트에서 볼 수 있다.
사용자가 확인란을 클릭하고 Shift 키를 누른 채 다음 행의 다른 확인란을 클릭하면 두 확인란 사이에 있는 모든 확인란이 선택됩니다.
기본적으로 CSS의 이 코드 때문에 모든 확인란을 선택할 수 있으며 텍스트는 한 줄로 통과됩니다.
input:checked + p {
background: #f9f9f9;
text-decoration: line-through;
}
그래서 우리가 하는 첫 번째 일은 모든 복선상자를 선택하는 것이다. 거기서 나는 type
키를 통해 요소를 선택하는 법을 배웠다.const checkboxes = document.querySelectorAll(
'.inbox input[type="checkbox"]'
);
현재 우리는 모든 복선상자의 노드 목록이 있습니다. 우리는 forEach()
을 사용하여 모든 복선상자를 훑어보고 eventListeners()
을 추가할 것입니다.checkboxes.forEach((checkbox) =>
checkbox.addEventListener("click", handleCheck)
);
여기서 주의해야 할 점은 click
이벤트가 아니라 change
이벤트를 사용합니다. 키보드를 사용해도 click
이벤트가 터치되기 때문입니다.현재, 우리는
handleCheck
함수에서 우리의 논리를 작성할 것이며, 사용자가 어떤 상자를 누르면 이 함수를 호출할 것이다.다음에 주의해야 할 것은 첫 번째 상자를 선택할 때 변수에 넣어야 한다는 것이다. 왜냐하면 두 번째 상자를 선택할 때 (
shift
을 누르면) 마지막 상자가 무엇인지 알아야 하기 때문이다.따라서 인용을 유지하기 위해 변수를 만들 것입니다. 변수를 만든 후에 handleCheck
함수의 끝에 업데이트할 것입니다.let lastChecked;
function handleCheck(e) {
//rest of the code
lastChecked = this;
Note: We use
let
instead ofconst
because this variable is going to update constantly.
이제 사용자가 클릭한 확인란에 따라 어떤 확인란이 필요한지 확인해야 합니다.따라서 DOM에 있는 위치를 찾기보다는 그들 사이의 원소를 찾아내고 부모 원소를 찾으려는 것보다...
이것은 매우 취약한 방식이다. 왜냐하면 우리는 HTML 집합에 의존하기 때문이다. 만약 다른 사람이 나타나서 HTML을 조금만 바꾸면 코드가 중단될 것이다. 우리는 이렇게 하기를 원하지 않는다.
우리가 해야 할 일은 모든 복선상자를 순환할 것이다. 우리는
inBetween
이라는 변수(최초는 false
)를 만들고 inBetween
은 전체 복선상자 노드 목록을 순환할 것이다. 선택한 복선상자를 찾으면 그 값을 true
으로 설정하고 순환은 한 번 진행되며 두 번째는 선택한 복선상자를 찾을 것이다.요소는 다시 false
으로 설정합니다.현재, 우리가
inBetweeen
인코딩 논리를 하기 전에, 우리는 또 다른 검사를 실행해야 한다. 우선 shift
을 누르고, 복선상자를 눌렀을 때, 사용자는 그것을 선택 취소하는 것이 아니라, click
이벤트가 이 두 가지 상황에서 모두 터치되기 때문이다.let inBetween = false;
if (e.shiftKey && this.checked) {
//loop over every single checkbox
checkboxes.forEach((checkbox) => {
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
if (inBetween) {
checkbox.checked = true;
}
});
}
이 (e.shiftKey && this.checked)
은 shift
을 누르고 선택을 취소하지 않으면 복선상자에서 순환하지 않습니다.이 부분을 사용하면 우리는 모든 복선상자를 순환적으로 검사하고 이에 상응하여
inBetween
을 업데이트한다.checkboxes.forEach((checkbox) => {
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
우리는 이것을 사용했다.if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
단순히 true
또는 false
으로 설정하는 것이 아니라 우리의 복선상자를 양방향으로 작동하게 하기 때문에 우리가 inBetween
을 하는 것은 상반된다.NOTE: keep in mind checks are always performed top->bottom.
첫 번째는 사용자가 먼저 낮은 확인란을 클릭한 다음 높은 확인란을 클릭하는 것입니다. 이 경우
checkbox === this
은 진짜입니다(이 this
은 선택한 확인란과 같음). 이 확인란은 현재 순환하는 확인란이기 때문에 조건은 진짜입니다.두 번째는 사용자가 먼저 위의 상자를 클릭한 다음에 아래의 상자를 클릭하는 것이다.이 경우
checkbox === lastChecked
은 사실입니다. 위쪽 상자는 lastChecked
변수에 저장되어 있고 아래쪽 상자는 현재 선택한 상자이기 때문에 inBetween
을 진짜로 설정하여 inBetween = !inBetween
의 값을 복원합니다.긴 말은 짧게 하고, 복선상자
inBetween
을true로 설정하고, 두 번째 복선상자 inBetween
을false로 설정합니다.inBetween
태그를 사용하면 모든 상자가 선택됩니다. inBetween
은 진짜입니다. 즉, 둘 사이의 모든 상자입니다.if (inBetween) {
checkbox.checked = true;
}
다음은 전체 JavaScript 코드입니다.const checkboxes = document.querySelectorAll(
'.inbox input[type="checkbox"]'
);
let lastChecked;
function handleCheck(e) {
//we need to check if they had the shift key down
//and check that they are checking it not unchecking it
let inBetween = false;
if (e.shiftKey && this.checked) {
//loop over every single checkbox
checkboxes.forEach((checkbox) => {
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
}
if (inBetween) {
checkbox.checked = true;
}
});
}
lastChecked = this;
}
checkboxes.forEach((checkbox) =>
checkbox.addEventListener("click", handleCheck)
);
이것만 있으면 우리 그날의 프로젝트는 완성된다.GitHub 재구매:
세나크라시 / JS-30-DAY-10
javascript30 9일차 블로그
JavaScript-30-Day-9
쿠마르 하시・ 6월 9일・ 4분 읽기
#javascript
#productivity
#webdev
#github
javascript30 8일차 블로그
JavaScript-30-Day-8
쿠마르 하시・ 6월 8일・ 5분 읽기
#javascript
#html
#webdev
#github
javascript30 7일차 블로그
JavaScript-30-Day-7
쿠마르 하시・ 6월 7일・ 4분 읽기
#javascript
#html
#github
#webdev
개발자 프로필
.ltag__user__id__641726.작업 따르기 버튼
배경색: #000000!중요
색상: #000000!중요
테두리 색상: #000000!중요
}
쿠마르가 뒤를 따르다
The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.
javascript30으로 전화하여 문제 해결
고마워요 고마워요
, WesBos 우리와 공유!😊💖
의견을 올려주시고 의견을 알려주세요.
감사합니다!
Reference
이 문제에 관하여(JavaScript-30-Day-10), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cenacr007_harsh/javascript-30-day-10-2nl5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)