Итак, я вернулся после очередного сложного испытания JavaScript30 Уэса Боса! Сегодняшняя задача заключалась в гораздо большем объеме работы, чем я предполагал вначале. Удержание клавиши Shift для установки нескольких флажков — настолько распространенная практика, что я был удивлен, увидев, что она не встроена в веб-сайты автоматически и что вам приходится вручную программировать ее. Очевидно, если бы это было так, этого урока не было бы, но вы понимаете, о чем я.

При полной прозрачности я сдался и последовал за Уэсом на этот урок. Видео даже началось с того, что он призвал нас взять на себя управление и разобраться во всем самостоятельно. После более чем полутора часов поиска в Google и попыток добиться какого-либо реального прогресса я сдался и продолжил этот урок. Я не горжусь тем, что отказался от этого, но я определенно провалился в кроличью нору ненужной информации и сомневаюсь, что смог бы найти реальное решение в любое время на этой неделе! Так что да… низко опустив голову, я последовал за Уэсом.

Этот урок очень понятен. Вам дают базовый контрольный список, а затем просят сделать так, чтобы можно было отметить несколько флажков, удерживая нажатой клавишу Shift во время установки флажка. Прохладный. Это оказалось гораздо сложнее, чем я думал. Прежде чем мы углубимся в сам урок и в то, что необходимо с нашей стороны, я хочу отметить одну вещь.

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

Мне понравилась эта очень простая строка CSS. Я знал, что можно создать флажок с помощью HTML с помощью , но я не знал, что вы можете изменить свойства флажка/div, в котором находится флажок, с помощью CSS, просто установив флажок. Я также хочу отметить здесь, что Уэс также упомянул, как часто он произносил слово «проверить», потому что в видео его было много… справедливо предупреждаю, что в этом посте его будет столько же.

  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 



Все в блоке кода над этой строкой было ошибкой.  Это были лишь некоторые из моих попыток найти решение самостоятельно.  Несколько раз мне казалось, что я на правильном пути.  Например, первая часть с функцией 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 нам пришлось создать новую переменную, чтобы определить, какой элемент находился между первым проверенным элементом и последним проверенным элементом.  Именно так мы могли бы отметить оставшиеся флажки и изменить их свойства, чтобы они отражали свойства элементов, которые были отмечены изначально.  Здесь было так много строк, что я немного растерялся... снова используя || и используя ! перед переменной для меня странные понятия.  Мне нужно изучить их подробнее перед моим следующим проектом.

   Прежде чем я понял, что происходит, мы уже завершили испытание.  Это просто сработало.  Именно в тот момент я понял, что эта задача оказалась гораздо проще, чем я думал.  Когда все сказано и сделано, кода было не так уж и много.  Возможность использовать все части вместе была сложной задачей.  Возможно, я смог бы решить эту проблему сам, но даже говоря это, я сомневаюсь, что смог бы найти жизнеспособное решение к концу этой недели.

  Ну вот и завершаю этот пост!  Сегодняшний урок был для меня не самым лучшим, но он стал хорошим напоминанием о том, что мне еще предстоит пройти долгий и долгий путь.  Надеюсь, вы вернетесь и прочитаете мой следующий пост о следующей части JavaScript 30 Уэса Боса с 11 пользовательскими HTML5-видеоплеерами!