Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как сократить названия классов с общим началом в массиве (https://javascript.ru/forum/misc/69381-kak-sokratit-nazvaniya-klassov-s-obshhim-nachalom-v-massive.html)

Alessio18911 19.06.2017 00:54

А почему? И ещё, forEach.сall - для меня новенькое. Я хотел бы узнать, чем отличаются
[].forEach.call(label, function(item, i)){...}
и
label.forEach(function(item, i)) {...}
. У меня обе работают одинаково )
А также я попробовал - для аналогии записать эту функцию через "старенькое" - цикл for. Но что-то не получается, подскажите, пожалуйста, что я сделал не так:
for (var i = 0; i < label.length; i++) 
      {
        label[i].addEventListener('click', function() {
          page.className = "page bg" + (i+1);
          });
       }

рони 19.06.2017 01:01

Цитата:

Сообщение от Alessio18911
У меня обе работают одинаково )

потому что не все браузеры ещё это поддерживают label.forEach
Цитата:

Сообщение от Alessio18911
пожалуйста, что я сделал не так:

потому что i всегда 3 на момент клика -- а bg4 у вас нет.

нужно замыкание i как в forEach
Пример ошибочного использования

рони 19.06.2017 01:11

пример на понимание отличия getElementsBy от querySelectorAll
 
Alessio18911,
удаление тегов LI
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

</head>

<body>
<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
</ul>
<script>
 var ul = document.getElementsByTagName("ul")[0], li = ul.getElementsByTagName("li");
   for (; li[0] && ul.removeChild(li[0]); ); //удаляется только первый
  /*   var ul = document.querySelector("ul"), li = ul.querySelectorAll("li");
   for (var i=0, item; item = li[i]; i++)  {ul.removeChild(item)} //удаляются все по очереди   */
</script>

</body>
</html>

Alessio18911 19.06.2017 01:15

Т.е. через forEach.call - это более старый способ?
Насчёт последнего - спасибо, даже не подозревал о таком..

рони 19.06.2017 01:25

Цитата:

Сообщение от Alessio18911
forEach.call - это более старый способ?

да
https://developer.mozilla.org/ru/docs/Web/API/NodeList

поддержка нового, по ссылке внизу (в ie нету)
https://developer.mozilla.org/en-US/...deList/forEach

Alessio18911 19.06.2017 01:54

Рони, и ещё: читаю тот пример ошибочного использования. Уже сломал голову - что значит строка:
divs[i].onclick = function(x) 
      {
          return function() 
          { 
                alert(x)
          }
       }(i)

Именно это i в конце! Каким боком оно к какой функции? Я только, конечно, начинаю влазить в JS, но не видел пока, чтобы то, что функция должна взять, стояло ЗА закрывающей скобкой...

ruslan_mart 19.06.2017 02:11

Alessio18911, создаётся функция и тут же вызывается, в неё передаётся "i" в качестве параметра "x". Внутри возвращается ещё одна функция, которая и будет в onclick, но у неё ещё будет доступен параметр "x" из замыкания первой функции.

рони 19.06.2017 02:14

Alessio18911,
функция создаётся и тут же запускается с аргументом i и возвращает другую функцию, в которой это i сохраняется.
может, кто поможет, скажет как-то иначе ...

Alessio18911 19.06.2017 11:08

Рони, Ruslan_xDD, спасибо! С этим (i) разобрался - оказывается, так можно вызывать функцию. Но почитал на learn.javascript про замыкание, про порядок обработки кода и инициализации. Примеры же там, конечно, даются простенькие совсем, например, когда переменная инициализируется ДО выполнения какой-то функции и потом ей же присваивается другое значение. Тогда всё понятно - значение берётся текущее. Но ведь также сказано, что на этапе запуска происходит поиск и подготовка всех Function Declaration и всех переменных, которые становятся undefined. А вот потом, уже когда код выполняется, идёт присваивание:
var phrase = 'Привет';

function sayHi(name) {
  alert(phrase + ', ' + name);
}

sayHi('Вася');  // Привет, Вася (*)

phrase = 'Пока';

sayHi('Вася'); // Пока, Вася (**)

Здесь всё предельно ясно: перед запуском подготовлена sayHi(name); и 2 переменные: name и phrase, которые undefined. Когда функция запущена, происходит присвоение name = 'Вася'; а дальше ищется phrase, которая, находясь раньше функции, получает значение 'Привет'. Соответственно, когда функция вызвана второй раз, то "ближайшей" к ней phrase будет уже вторая, с 'Пока' поэтому результат её изменится.
Дальше возвращаемся к "ошибочному примеру". Там функция такова:
function addEvents(divs) {

    for(var i=0; i<divs.length; i++) {  

        divs[i].innerHTML = i

        divs[i].onclick = function() { alert(i) }

    }

}

Т.е. присвоение i значений же происходит последовательно, по мере того, как крутится цикл! Почему же тогда говорится, что "обработчик onclick активизируется, когда цикл закончен и i == 10;"?? Ведь
divs[i].onclick = function() { alert(i) }
расположен ВНУТРИ этого цикла, а не ЗА его пределами ниже! Почему тогда он берёт не текущую i, а финальную сразу? Или это свойство обработчика - активизироваться только после того, как отработает цикл, несмотря на то, что сам он находится внутри?

рони 19.06.2017 11:21

Цитата:

Сообщение от Alessio18911
Почему тогда он берёт не текущую i, а финальную сразу?

:-? потому что i на момент клика содержит финальное значение
Цитата:

Сообщение от Alessio18911
divs[i].onclick = function() { alert(i) //запросить i и вывести на экран}



Часовой пояс GMT +3, время: 23:46.