JavaScript – Halten Sie die Umschalttaste gedrückt, um mehrere Kontrollkästchen zu aktivieren!

Ich bin also zurück nach einer weiteren harten Herausforderung durch Wes Bos‘ JavaScript30! Die heutige Herausforderung war viel mehr Arbeit, als ich zunächst angenommen hatte. Das Halten der Umschalttaste zum Aktivieren mehrerer Kontrollkästchen ist eine so gängige Praxis. Ich war überrascht, dass es nicht automatisch in Websites integriert ist und man es manuell selbst programmieren musste. Wenn das der Fall wäre, gäbe es diese Lektion natürlich nicht, aber Sie wissen, was ich meine.

Mit voller Transparenz gab ich auf und folgte Wes für diese Lektion. Das Video begann sogar damit, dass er uns ermutigte, die Zügel in die Hand zu nehmen und es selbst herauszufinden. Nachdem ich über anderthalb Stunden gegoogelt und versucht hatte, echte Fortschritte zu erzielen, gab ich es auf und folgte dieser Lektion. Ich bin nicht stolz darauf, dieses Problem aufgegeben zu haben, aber ich bin definitiv in ein Kaninchenloch irrelevanter Informationen geraten, und ich bezweifle, dass ich diese Woche jemals eine tatsächliche Lösung gefunden hätte! Also ja...mit gesenktem Kopf folgte ich Wes.

Diese Lektion ist sehr selbsterklärend. Sie erhalten eine grundlegende Checkliste und werden dann gebeten, das Ankreuzen mehrerer Kästchen zu ermöglichen, indem Sie beim Ankreuzen eines Kästchens die Umschalttaste gedrückt halten. Cool. Das stellte sich als viel komplizierter heraus, als ich dachte. Bevor wir uns mit der eigentlichen Lektion und dem, was unsererseits notwendig war, befassen, möchte ich noch eines hervorheben.

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

Diese sehr einfache CSS-Zeile fand ich cool. Ich wusste, dass es möglich ist, mit HTML ein Kontrollkästchen mit zu erstellen. Mir war jedoch nicht bewusst, dass Sie die Eigenschaften des Kontrollkästchens/des Divs, in dem sich das Kontrollkästchen befindet, mit CSS ändern können, indem Sie einfach das Kontrollkästchen aktivieren. Ich möchte hier auch anmerken, dass Wes auch erwähnt hat, wie oft er das Wort „check“ gesagt hat, weil es in dem Video häufig vorkommt … Aber Vorsicht, in diesem Beitrag wird es genauso häufig vorkommen.

  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)} }

Alles im Codeblock oberhalb dieser Zeile war ein Fehler. Dies waren nur einige meiner Versuche, selbst eine Lösung zu finden. Ich hatte ein paar Mal das Gefühl, auf dem richtigen Weg zu sein. Zum Beispiel der erste Teil mit der Funktion logKey(e). Ich war so stolz, als ich herausgefunden habe, wie man aufruft, wann die Umschalttaste während eines Klicks gedrückt wurde und wann nicht. Danach ... konnte ich nicht einmal erraten, wie es weitergehen sollte. Wieder steckte ich fest.

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 war hier, um den Tag damit zu retten. Er gab zwar an, dass es möglich sei, mehrere Kästchen anzukreuzen, indem man das übergeordnete/untergeordnete Element im HTML-Code aufruft, dies könne jedoch leicht durch am HTML vorgenommene Änderungen unterbrochen werden. Stattdessen ließ er uns eine for-Schleife oder zumindest forEach verwenden. Das ergab für mich sehr viel Sinn. Es ist eine ziemlich einfache Möglichkeit, jeden Teil des HTML-Codes durchzugehen und dabei zu prüfen, ob ein Kontrollkästchen aktiviert wurde. Das war allerdings nur die halbe Miete.
Nach der Verwendung von forEach mussten wir eine neue Variable erstellen, um zu bestimmen, welches Element zwischen dem ersten überprüften Element und dem letzten überprüften Element lag. Auf diese Weise würden wir die verbleibenden Kontrollkästchen aktivieren und ihre Eigenschaften so ändern, dass sie denen der ursprünglich aktivierten Elemente entsprechen. Es gab hier so viele Zeilen, die mich ein wenig verwirrt haben ... wieder mit dem || und mit einem ! vor einer Variablen sind für mich seltsame Konzepte. Ich muss sie mir vor meinem nächsten Projekt genauer ansehen.
Bevor ich überhaupt wusste, was los war, hatten wir die Herausforderung schon geschafft. Es hat einfach funktioniert. In diesem Moment wurde mir klar, dass diese Herausforderung viel einfacher war, als ich dachte. Letztendlich war es nicht so viel Code. Der komplizierte Teil bestand darin, alle Teile zusammen verwenden zu können. Ich hätte das vielleicht selbst lösen können, aber selbst wenn ich das sage, bezweifle ich, dass ich bis Ende dieser Woche eine brauchbare Lösung hätte finden können.
Nun, damit ist dieser Beitrag abgeschlossen! Die heutige Lektion war nicht die beste für mich, aber sie war eine gute Erinnerung daran, dass ich noch einen langen, langen Weg vor mir habe. Ich hoffe, Sie kommen wieder und lesen sich meinen nächsten Beitrag mit dem nächsten Teil von Wes Bos‘ JavaScript 30 mit - 11 benutzerdefiniertem HTML5-Videoplayer an!

Das obige ist der detaillierte Inhalt vonJavaScript – Halten Sie die Umschalttaste gedrückt, um mehrere Kontrollkästchen zu aktivieren!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!