JavaScript-30-Day-10

15183 단어 webdev github javascript html

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 of const 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)
      );