JavaScript - Shift キーを押しながら複数のチェックボックスをオンにします。

ということで、Wes Bos の JavaScript30 からのまたしても難しい課題を乗り越えて戻ってきました!今日の課題は、私が最初に想定していたよりもはるかに多くの作業でした。 Shift キーを押しながら複数のボックスをチェックするのは非常に一般的な方法ですが、それが Web サイトに自動的に組み込まれておらず、自分で手動でコーディングする必要があることを知って驚きました。 もしそうであれば、このレッスンは存在しないことは明らかですが、私が言いたいことはわかります。

私は完全に透明性を持ってあきらめて、このレッスンについてウェスの説明に従いました。 ビデオは、彼が私たちに統治を引き受けて自分たちで解決するよう激励するところから始まりました。 1 時間半以上グーグル検索をして、実際の進歩を試みた後、私はあきらめて、このレッスンに従いました。 これを諦めたことを誇りに思うわけではありませんが、間違いなく無関係な情報のウサギの穴に落ちていたので、今週いつになっても実際の解決策を思いつくことはできなかったでしょう。 そうそう...私は頭を下げてウェスについていきました。

このレッスンは一目瞭然です。 基本的なチェックリストが与えられ、Shift キーを押しながらボックスをチェックすることで複数のボックスをチェックできるようにするよう求められます。 いいね。 これは私が思っていたよりもはるかに複雑であることが判明しました。 実際のレッスンに入る前に、そして私たちに必要なことを説明する前に、注意しておきたいことが 1 つあります。

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

この非常にシンプルな CSS 行は私にとってクールでした。 を使用して HTML でチェックボックスを作成できることは知っていました。しかし、チェックボックスをオンにするだけで、CSSを使用してチェックボックス/チェックボックスが含まれるdivのプロパティを変更できることは知りませんでした。 また、ここで注意したいのは、ウェスが「チェック」という単語をどのくらいの頻度で言ったかについても言及したことです。ビデオの中でそれが多かったので、この投稿でも同じくらいであることを警告します。

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

この行より上のコード ブロックはすべて失敗でした。 これらは、私が自分で解決策を見つけようとした試みのほんの一部です。 何度か、自分が正しい道を進んでいるように感じました。 たとえば、関数 logKey(e) を含む最初の部分では、クリック中に Shift キーが押されたときと押されていないときに呼び出す方法を見つけられたことにとても誇りに思いました。 その後は…どうやって進めばいいのか全く分かりませんでした。 また行き詰まってしまいました。

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

ウェスはこれで危機を救うためにここに来ました。 同氏は、HTML 内で親/子を呼び出すことで複数のボックスをチェックできると述べましたが、これは HTML に加えられた変更によって簡単に破られる可能性があります。 代わりに、彼は for ループ、または少なくとも forEach を使用するように指示しました。 これは私にとって非常に意味のあることでした。 これは、途中でボックスがチェックされているかどうかを確認しながら、HTML の各部分を確認する非常に簡単な方法です。 しかし、それは戦いの半分に過ぎませんでした。
forEach を使用した後、最初にチェックされた要素と最後にチェックされた要素の間にどの要素があるかを判断するための新しい変数を作成する必要がありました。 これは、残りのボックスをチェックし、最初にチェックされた要素のプロパティを反映するようにそのプロパティを変更する方法です。 ここには行が多すぎて少し迷ってしまいました...もう一度 || を使用します。 ! を使用します。変数の前というのは私にとって奇妙な概念です。 次のプロジェクトまでにもっと調べなければなりません。
何が起こっているのかわからないうちに、どういうわけか私たちはすでにチャレンジを終えていました。 それはうまくいきました。 その瞬間、この課題は思っていたよりもはるかに単純なものであることがわかりました。 結局のところ、コードはそれほど多くありませんでした。 すべての部品を一緒に使用できるようにすることが複雑な部分でした。 私自身で解決できたかもしれませんが、そうは言っても、今週末までに実行可能な解決策を思いつくことができたとは思えません。
それでは、この投稿はこれで終わります。 今日のレッスンは私にとって最高のものではありませんでしたが、私にはまだまだ長い道のりがあることを思い出させてくれました。 次回の投稿で、Wes Bos の JavaScript 30 with - 11 Custom HTML5 Video player の次の部分をチェックしに戻ってきていただければ幸いです!

以上がJavaScript - Shift キーを押しながら複数のチェックボックスをオンにします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。