QuerySelector для нескольких элементов?

Question

[deathsoul]

Здравствуйте, подскажите пожалуйста, как сделать, чтобы скрипт сработал и для st_img_1, st_img_2, st_img_3, st_img_4. Для каждого надо немного другой стиль применить. Пробовал через

<script type="text/javascript">
let section = document.querySelectorAll ('.stall');

  window.onscroll = magic;

  function magic(){
    if (window.pageYOffset > 400) {
      section.style.width= '20%'
      section.style.margin= '-100px 0 0 -200px'
      section.style.transition= '1s ease-in-out 0s'
    } else {
      section.style.width= '10%'
      section.style.margin= '0'
    }
  }</script>

не работает( когда querySelector на 1 элемент первый работает, когда all без толку). В скриптах полный профан, а сделать надо.

Comments

[WapSter]

All + цикл. Удачи)

[deathsoul]

WapSter, но ведь у четырех элементов немного разные стили, а цикл переберет их и выполнит для всех одно и то же.

[WapSter]

deathsoul, и что?

Answer 1

[JP_Cool]

В переменной section у тебя массив нод, который нужно перебрать в цикле, например, используя forEach. И тогда у тебя уже будет экземпляр одной конкретной секции, а с ним уже можно выполнять твой код

Comments

[deathsoul]

Т.Е. как-то так?

let section = document.querySelectorAll ('.st_img_');

  window.onscroll = magic;

  function magic(){
section.forEach(function(st_img_){
    if (window.pageYOffset > 400) {
      section.style.width= '20%'
      section.style.margin= '-100px 0 0 -200px'
      section.style.transition= '1s ease-in-out 0s'
    } else {
      section.style.width= '10%'
      section.style.margin= '0'
    }
  }
}

[JP_Cool]

deathsoul, Ты уже сам смотри, если программа работает так, как ты задумал, значит да. И маленький совет: используй стрелочные функции :)

[Дмитрий]

deathsoul, вместо section внутри функции st_img_ используй (либо что логичнее назови section как sections, а st_img_ как section)

и для совместимости с браузерами старыми вместо section.forEach(function(...) напиши [].forEach.call(section, function(...) - про это можешь загуглить

[WapSter]

JP_Cool, мда совет про стрелочные функции в стиле не используй фигурную отвертку, а только всегда плоскую.

[Арсений Матыцин]

WapSter, привет миру DIY)

[Дмитрий Беляев]

[].forEach.call

crystalbit, не учите людей плохому...

[Дмитрий]

Дмитрий Беляев, что плохого в текущей реальности? как понимаю, речь про реальный проект, а не академическую задачу

[Дмитрий Беляев]

crystalbit, создать инстанс массива только ради вызова метода его прототипа? действительно, что плохого, код то будет не у нас гоняться, а у пользователей

ну и насчет forEach у NodeList, если кому то ооочень сильно нужен IE, то можно и заполифилить, но реально IE уже сдох во всех случаях, когда Вы не имеете дело с госсектором. А все остальное имеет forEach у NodeList нативно

[Дмитрий]

Дмитрий Беляев, да хорошо, можно и Array.prototype.forEach.call, но как давно у Вас что-то ломалось или сильнее тормозило из-за лишнего одного пустого массива не в цикле?) выглядит как избыточная оптимизация, хотя в плане правильности согласен, спасибо

не знаю, при чём тут госсектор, но для реальных проектов потеря 1-5% трафика (я не только про ie - есть и старые версии, и моб) - такое себе. Речь не про какой-то модный сайт для хипстеров, а тот что для массового сектора людей
(по умолчанию считаю что проект без транспайлера, а так конечно, лучше использовать все возможности)

Answer 2

[profesor08]

const elements = [...document.querySelectorAll('.stall')];
for (const section of elements) {
  console.log(section);
}

Comments

[Дмитрий Беляев]

эм... перегнать итератор в массив, чтоб потом опять гонять его итератором?
почему обязательно топить помещения пользователей процессорами?
Ведь так прекрасно работает:

for (const section of document.querySelectorAll('.stall')) {
  console.log(section);
}

Ну и немного понимания, того что под капотом Вам:

console.log([...{[Symbol.iterator]() {
  let i = 0;
  return {next() {
    console.log('spread', i);
    return {value: i++, done: i > 10};
  }};
}}]);
for(const item of {[Symbol.iterator]() {
  let i = 0;
  return {next() {
    console.log('for of', i);
    return {value: i++, done: i > 10};
  }};
}}) console.log('for body', item);

[profesor08]

Дмитрий Беляев, я так захотел, мог написать Array.from

const elements = Array.from(document.querySelectorAll('.stall'));
for (const section of elements) {
  console.log(section);
}

Результат аналогичен

var elements = Array.from(document.querySelectorAll('.stall'));

for (var _i = 0, _elements = elements; _i < _elements.length; _i++) {
  var section = _elements[_i];
  console.log(section);
}

[Дмитрий Беляев]

Результат аналогичен

profesor08, нет, результат не аналогичен. Во-первых итераторы работают не с length и числовыми индексами (у итератора их вообще может не быть, например у Set их нет), он работает с интерфейсом итератора.
Но главная проблема, в том, что Вы проходите коллекцию 2 раза, хотя для достижения цели достаточно одного. Вы сделали лишние бесполезное действие, усложнили код, а значит потенциально породили баги, но в довесок Вы убили время пользователя и потратили его вычислительные ресурсы.

[profesor08]

Дмитрий Беляев, что значит не аналогичен? Берешь бабель, скармливаешь ему кусок кода

const elements = Array.from(document.querySelectorAll('.stall'));
for (const section of elements) {
  console.log(section);
}

Получаешь кусок кода

var elements = Array.from(document.querySelectorAll('.stall'));

for (var _i = 0, _elements = elements; _i < _elements.length; _i++) {
  var section = _elements[_i];
  console.log(section);
}

Можно еще ускорить, избавить от преобразования к массиву. Можно вообще этого не делать, а работать с глобальными индексами. Но зачем? Я захотел написать так, и я так написал.

[Дмитрий Беляев]

profesor08, у нас видимо разные плагины к бабелю стоят, потому что Ваш, в отличии от входящего в preset-env явно генерит код с потенциальной ошибкой.

Можно еще ускорить, избавить от преобразования к массиву.

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

Я захотел написать так, и я так написал

Впрочем понятно...

[profesor08]

Дмитрий Беляев, пусть гоняет, это не бутылочное горлышко и стать им может разве что во влажных мечтах.

[Дмитрий Беляев]

profesor08, может и не бутылочное горлышко, с таким то подходом... Сразу ясно, что благодаря таким приложениям не замерзнешь зимой, проц согреет...
Но это еще и потенциальный баг, ибо код усложнен.

[profesor08]

Дмитрий Беляев, потенциальным уязвимостям счету нет, не очевидных ошибок еще больше, но если думать в первую очередь о них, писать код можно даже не начать.