JavaScript - Maintenez Shift pour cocher plusieurs cases !

Je suis donc de retour après un autre défi difficile du JavaScript30 de Wes Bos ! Le défi d’aujourd’hui représentait beaucoup plus de travail que je ne le pensais au départ. Maintenir Shift pour cocher plusieurs cases est une pratique si courante que j'ai été surpris de voir qu'elle n'est pas automatiquement intégrée aux sites Web et que vous deviez la coder manuellement vous-même. Évidemment, si tel était le cas, cette leçon n’existerait pas, mais vous voyez ce que je veux dire.

En toute transparence, j'ai abandonné et j'ai suivi Wes pour cette leçon. La vidéo a même commencé avec lui nous encourageant à prendre les rênes et à le découvrir nous-mêmes. Après plus d'une heure et demie de recherche sur Google et de tentative de progrès réel, j'ai abandonné et j'ai suivi cette leçon. Je ne suis pas fier d'avoir abandonné celui-ci, mais je tombais définitivement dans un terrier d'informations non pertinentes et je doute que j'aurais trouvé une véritable solution à tout moment cette semaine ! Alors oui... la tête basse, j'ai suivi Wes.

Cette leçon est très explicite. Vous recevez une liste de contrôle de base, puis il vous est demandé de permettre de cocher plusieurs cases en maintenant la touche Maj enfoncée tout en cochant une case. Cool. Cela s’est avéré beaucoup plus compliqué que je ne le pensais. Avant de plonger dans la leçon proprement dite et ce qui était nécessaire de notre part, il y a une chose que je souhaite souligner.

    input:checked + p {
      background: #F9F9F9;
      text-decoration: line-through;
    }

Cette ligne de CSS très simple était cool pour moi. Je savais qu'il était possible de créer une case à cocher avec HTML avec mais je ne savais pas que vous pouviez modifier les propriétés de la case à cocher/du div dans lequel se trouve la case à cocher avec CSS simplement en cochant la case. Je tiens également à noter ici que Wes a également mentionné la fréquence à laquelle il prononçait le mot « vérifier » parce que c'était beaucoup dans la vidéo... je vous préviens, ce sera tout autant dans ce post.

  let log = document.querySelector('#log');
  document.addEventListener("click", logKey)
  function logKey(e) {
    console.log(`The shift key is pressed: ${e.shiftKey}`);}

function validate() {
  if (document.getElementsByClassName('item').checked) {
    alert('checked');
  } else { alert('you didnt check it!')} }
validate()  
  let checkBoxes = document.querySelectorAll('checkbox');
  let selected = [];
  for (let i=0; i < checkBoxes.length; i++) {
    if (checkBoxesp[i].checked) {
      selected.push(checkBoxes[i].value)} }

Tout ce qui se trouve dans le bloc de code au-dessus de cette ligne était un échec. Ce ne sont là que quelques-unes de mes tentatives pour essayer de trouver moi-même la solution. J'ai eu l'impression d'être sur la bonne voie à plusieurs reprises. Par exemple, la première partie avec la fonction logKey(e) J'étais si fier d'avoir trouvé comment appeler lorsque la touche Maj était enfoncée pendant un clic et quand ce n'était pas le cas. Après ça... je ne pouvais même pas deviner comment procéder. Encore une fois, j'étais coincé.

const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
let lastChecked

function handleCheck(e) {
  let inBetween = false
if (e.shiftKey && this.checked){
  checkboxes.forEach (checkbox => {
    console.log(checkbox)
    if (checkbox === this || checkbox === lastChecked) {
      inBetween =!inBetween;
    }
    if(inBetween) {
      checkbox.checked = true
    }
  })
}
  lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));

Wes était là pour sauver la situation avec ça. Il a déclaré qu'il serait possible de cocher plusieurs cases en appelant le parent/enfant dans le HTML, mais cela pourrait être facilement interrompu par les modifications apportées au HTML. Au lieu de cela, il nous a fait utiliser une boucle for, ou au moins un forEach. Cela me paraissait très logique. C'est un moyen assez simple de parcourir chaque partie du HTML tout en vérifiant si une case a été cochée en cours de route. Mais ce n’était que la moitié de la bataille.
Après avoir utilisé forEach, nous avons dû créer une nouvelle variable pour déterminer quel élément se trouvait entre le premier élément vérifié et le dernier élément vérifié. Ce serait ainsi que nous cocherions les cases restantes et modifierions leurs propriétés pour refléter celles des éléments initialement cochés. Il y avait tellement de lignes ici qui m'ont un peu perdu... encore une fois en utilisant le || et en utilisant un ! avant une variable, ce sont des concepts étranges pour moi. Je dois les examiner davantage avant mon prochain projet.
Avant que je sache ce qui se passait, nous avions déjà terminé le défi. Cela a juste fonctionné. C’est à ce moment-là que j’ai réalisé que ce défi était bien plus simple que je ne le pensais. Ce n’était pas tellement de code en fin de compte. Pouvoir utiliser toutes les pièces ensemble était la partie la plus compliquée. J'aurais peut-être pu résoudre ce problème moi-même, mais même en disant cela, je doute que j'aurais pu trouver une solution viable d'ici la fin de cette semaine.
Eh bien, cela conclut ce post ! La leçon d'aujourd'hui n'a pas été la meilleure pour moi, mais elle m'a rappelé que j'avais encore un long chemin à parcourir. J'espère que vous reviendrez pour consulter mon prochain article avec la prochaine partie de JavaScript 30 de Wes Bos avec - 11 lecteurs vidéo HTML5 personnalisés !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!