JavaScript- Tahan Shift untuk Semak Berbilang Kotak Semak!

Jadi saya kembali selepas satu lagi cabaran sukar daripada JavaScript30 Wes Bos! Cabaran hari ini adalah lebih banyak kerja daripada yang saya sangkakan. Menahan syif untuk menyemak berbilang kotak adalah amalan biasa. Saya terkejut apabila melihat ia tidak terbina dalam ke tapak web secara automatik dan anda perlu mengekodnya sendiri secara manual. Jelas sekali jika itu berlaku maka pelajaran ini tidak akan wujud tetapi anda tahu apa yang saya maksudkan.

Dengan ketelusan penuh saya menyerah dan mengikuti Wes untuk pelajaran ini. Video itu juga bermula dengan dia menggalakkan kami untuk mengambil alih pemerintahan dan memikirkannya sendiri. Selepas lebih satu setengah jam mencari dan mencuba apa-apa jenis kemajuan sebenar, saya menyerah dan mengikuti pelajaran ini. Saya tidak berbangga untuk berputus asa dengan yang satu ini tetapi saya pasti telah jatuh ke dalam lubang arnab maklumat yang tidak relevan dan saya ragu saya akan menghasilkan penyelesaian sebenar pada bila-bila masa minggu ini! Jadi ya...dengan kepala tertunduk saya mengikut Wes.

Pelajaran ini sangat jelas. Anda diberi senarai semak asas dan kemudian diminta untuk membolehkan anda menyemak berbilang kotak dengan menahan shift sambil menandakan kotak. Sejuk. Ini ternyata jauh lebih rumit daripada yang saya fikirkan. Sebelum kita menyelami pelajaran sebenar dan apa yang perlu di pihak kita, ada satu perkara yang ingin saya nyatakan.

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

Barisan CSS yang sangat ringkas ini menarik perhatian saya. Saya tahu adalah mungkin untuk membuat kotak semak dengan HTML dengan tetapi saya tidak sedar bahawa anda boleh menukar sifat kotak semak/div kotak semak berada dengan CSS hanya dengan menandakan kotak itu. Saya juga ingin ambil perhatian di sini bahawa Wes juga menyebut berapa kerap dia menyebut perkataan "semak" kerana ia banyak dalam video...amaran yang adil ia akan menjadi sama banyak dalam siaran ini.

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

Semua dalam blok kod di atas baris ini adalah kegagalan. Ini hanyalah beberapa percubaan saya untuk mencari penyelesaian sendiri. Saya berasa seolah-olah saya berada di landasan yang betul beberapa kali. Sebagai contoh bahagian pertama dengan fungsi logKey(e) Saya sangat berbangga kerana mencari cara untuk memanggil apabila kekunci shift ditekan semasa klik dan apabila ia tidak. Selepas itu...saya tidak dapat meneka bagaimana untuk meneruskan. Sekali lagi saya tersekat.

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 berada di sini untuk menyelamatkan hari dengan ini. Dia menyatakan adalah mungkin untuk menyemak berbilang kotak dengan memanggil ibu bapa/anak dalam HTML, tetapi ini boleh dipecahkan dengan mudah oleh perubahan yang dibuat pada HTML. Sebaliknya dia menyuruh kami menggunakan gelung for, atau sekurang-kurangnya forEach. Ini sangat masuk akal kepada saya. Ia adalah cara yang agak mudah untuk melalui setiap bahagian HTML sambil menyemak sama ada kotak telah ditandakan di sepanjang jalan. Itu baru separuh daripada pertempuran.
Selepas menggunakan forEach, kami perlu membuat pembolehubah baharu untuk menentukan elemen mana yang berada di antara elemen pertama yang diperiksa dan elemen terakhir yang diperiksa. Beginilah cara kami menyemak kotak yang tinggal dan menukar sifatnya untuk mencerminkan unsur-unsur yang telah disemak pada mulanya. Terdapat begitu banyak baris di sini yang membuatkan saya sedikit tersesat...sekali lagi menggunakan || dan menggunakan ! sebelum pembolehubah adalah konsep yang pelik kepada saya. Saya perlu melihatnya lebih lanjut sebelum projek saya yang seterusnya.
Sebelum saya tahu apa yang berlaku entah bagaimana kami sudah menamatkan cabaran itu. Ia hanya berjaya. Pada saat itulah saya melihat bahawa cabaran ini jauh lebih mudah daripada yang saya fikirkan. Ia tidak begitu banyak kod apabila semua dikatakan dan dilakukan. Mampu menggunakan semua bahagian bersama-sama adalah bahagian yang rumit. Saya mungkin dapat menyelesaikannya sendiri, tetapi walaupun dengan mengatakannya, saya ragu saya boleh menghasilkan penyelesaian yang berdaya maju menjelang akhir minggu ini.
Nah, itu kira-kira mengakhiri siaran ini! Pelajaran hari ini bukanlah yang terbaik untuk saya, tetapi ia adalah peringatan yang baik bahawa saya masih mempunyai perjalanan yang jauh. Saya harap anda kembali untuk menyemak siaran saya yang seterusnya dengan bahagian seterusnya JavaScript 30 Wes Bos dengan - 11 Pemain Video HTML5 Tersuai!

Atas ialah kandungan terperinci JavaScript- Tahan Shift untuk Semak Berbilang Kotak Semak!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!