Загадочный код: i и x

ProgramBox

Загадочный код: i и x

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

В следующем коде:

 for (i=0; i<itemsinlist.length; i  ) {
        var rating = document.createElement('div');
        itemsinlist[i].appendChild(rating);
        rating.className = "rating";
        rating.id = "thumbnails"  i;

        for (x=0; x<4; x  ) {
        star = document.createElement('span');
        star.innerHTML = "amp;#9733;";
        star.className = "star";
        star.setAttribute("onclick", "ratingsSet(" i "," x ");");
        rating.appendChild(star);
} //createratingsstars

Я изо всех сил пытаюсь разобраться во втором параметре star.setAttribute() в строке:

 star.setAttribute("onclick", "ratingsSet(" i "," x ");");

В частности, меня сбивают с толку i и x .

Сначала я подумал, что это какая-то вариация оператора увеличения, но позже решил, что это, должно быть, что-то объединяет, но я не могу понять, что / как. HTML, который генерируется циклом, является:

 <span class="star" onclick="ratingsSet(0,0);">*</span>
<span class="star" onclick="ratingsSet(0,1);">*</span>
<span class="star" onclick="ratingsSet(0,2);">*</span>
<span class="star" onclick="ratingsSet(0,3);">*</span>

Но мои попытки обратного проектирования подводят меня (если у меня вообще были какие-либо для начала).

Помочь?

1. К вашему СВЕДЕНИЮ, добавление обработчика события click с использованием метода setAttribute не будет работать в некоторых браузерах. Использовать star.onclick = function() { ... }; .

2. Это довольно неприятный способ установить событие щелчка, вот что это такое.

Ответ №1:

Это конкатенация строк. i — счетчик внешнего цикла, а x — счетчик внутреннего цикла. Похоже, что выполняется итерация коллекции и создается 4 пролета для каждого элемента.

1. Ах, я неправильно понял, что означает ‘»‘. Я интерпретировал i и x как заключенные в кавычки, но на самом деле они находятся за пределами кавычек и, таким образом, объединяются. Тьфу, теперь это так очевидно. Спасибо!

2. @Nick: Выделение синтаксиса помогает решить проблему такого рода 😉

3. @неуловимый — ты прав. И редактор, который я использую (Espresso), действительно выделяет это. Я просто не смотрел на это. Я понимаю, что ошибка новичка.

Ответ №2:

Он собирает воедино эту строку:

 "ratingsSet(0,1);"

Значение 0 находится в переменной i , а значение 1 находится в переменной x . Если мы добавим несколько пробелов, это может быть более понятно:

  "ratingsSet("   i   ","   x   ");"

Ответ №3:

Насколько я могу судить, он увеличивает i и x и устанавливает атрибут при щелчке для элемента, который:

 "ratingsSet(" i "," x ");"

Затем после щелчка выполняется ratingsSet(" i "," x "); с параметрами.

Странный способ сделать это.

1. Спасибо. Какой «менее странный» способ сделать это?

2. Инструкция "ratingsSet(" i "," x ");" ничего не увеличивает. Он объединяет эти значения. Что в этом странного?

3. Правильным способом, ИМХО, было бы прикрепить обработчик события к элементу вместо добавления атрибута.

4. оператор @elusive не выполняет, скрипт выполняет. Посмотрите выше, для этого выполняется итерация по длине элемента, затем для каждой итерации он устанавливает атрибут для элемента как onclick .

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

Ответ №4:

Вы можете получить более читаемый код:

 star.onclick = function() {
   ratingsSet(i, x);
};

Установка обработчика события в качестве прерывания атрибута в старых браузерах плюс не очень элегантно.

Ответ №5:

JavaScript позволяет вам объединять строки и целые числа (и, AFAIK, строковое представление любого объекта) с помощью оператора plus. Результирующий HTML (со встроенным JavaScript!) — это просто: экземпляры вызовов ratingsSet() .

Ответ №6:

» » — это инфиксный оператор, который объединяет две строки.

Пример: «mor» «ning» выдадут строку «morning».

Таким образом, он просто выводит значение i или x в HTML.

Ответ №7:

У меня тот же вопрос, теперь я знаю, что допустил забавную ошибку. Вы, должно быть, так же, как и я, неправильно прочитали это утверждение. Для этого второго аргумента нужна строка, поэтому «ratingsSet(» i «, » x «);» означает

«Набор оценок(»
i
«, »
x
«):»

таким образом, этот аргумент станет строкой. Там нет x
🙂