Попытка преобразовать числовое значение в CSS
Я пытаюсь перебрать несколько DIVS, вытащить числовое значение из указанных DIV, если это значение равно == определенному значению в JS, применить определенный класс CSS обратно к DIV, из которого он пришел.
Это код, который у меня есть
const getRating = document.getElementsByClassName('my-ratings');
let getRatingValues = [];
for(var i = 0; i < getRating.length; i++) {
getRatingValues += getRating[i].textContent;
if (getRatingValues == 5) {
getRating.classList.add('rating-5');
}
if (getRatingValues == 4) {
getRating.classList.add('rating-4');
}
if (getRatingValues == 3) {
getRating.classList.add('rating-3');
}
if (getRatingValues == 2) {
getRating.classList.add('rating-2');
}
if (getRatingValues == 1) {
getRating.classList.add('rating-1');
}
}
Я чувствую, что близок, но просто не могу сломать ему хребет ...
На данный момент сценарий, кажется, заполняет getRatingValues как строку, поэтому, если у меня есть значения 5, 3, 1, 2, 2, 4, getRatingValues будет 531224. Может кто-нибудь указать мне правильное направление, пожалуйста?
почему вы определяете getRatingValues как массив, но используете его как целое число? это непонятно :) И вы можете сэкономить много места, если напишете свой код динамически, например: getRating.classList.add ('rating-' + getRatingValues);
+= также делает нечто иное, когда операторы являются строками (а textContent - строками).
Почему вы добавляете строку в массив?
Я собираю значения из DIV с классом my-ratings, затем я преобразую это значение в класс CSS, поэтому, если в DIV есть текст, равный 3, я создаю класс css с именем rating-3 и применяю его к DIV
@epascarello, потому что я идиот :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вам нужно преобразовать строку в Number.
Изменять
getRatingValues += getRating[i].textContent;
к
getRatingValues += Number(getRating[i].textContent);
Кроме того, ваш getRatingValues не следует инициализировать как [], вместо этого он должен быть
let getRatingValues = 0;
Для полноты картины, вероятно, стоит упомянуть, что вы можете преобразовать значение в число разными способами: += Number(var) или += parseInt(var) или, мой любимый, += +var ....
Попробуйте parseInt
getRatingValues += parseInt(getRating[i].textContent);
Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
СУХОЙ - и набрать на номер:
let getRatingValues = 0;
document.querySelectorAll('.my-ratings').forEach(function(rate) { // for each my rating
let val = rate.textContent; // get the rate
getRatingValues += isNaN(val)?0:+val; // convert to number if is IS a number and add
rate.classList.add('rating-'+val); // add the class - here or outside the loop?
})
Я бы подумал, что getRating.classList.add('rating-'+val); должен быть вне цикла, так как теперь вы получите 5 классов в одном div, если все 5 установлены
Для IE вам нужно
var ratings = document.querySelectorAll('my-ratings');
for (var i=0;i<ratings.length;i++) {
let val = ratings[i].innerText, rate = ratings[i];
Это действительно аккуратно, но я получаю document.getElementsByClassName('my-ratings').forEach is not a function
Пожалуйста, смотрите обновление. Я перешел на querySelectorAll, а IE не любит forEach на узлах - я мог бы создать рабочий пример, если бы у меня был HTML
Еще одна вещь, getRating теперь не определена. Могу ли я просто создать константу и поместить в нее document.querySelectorAll?
Ах нет. Я предполагаю, что rate.classList.add
Как и мой комментарий, вы можете очень легко оптимизировать свой код:
этот оптимизированный код:
const getRating = document.getElementsByClassName('my-ratings');
for(var i = 0; i < getRating.length; i++) {
getRatingValues += Number(getRating[i].textContent);
if (getRatingValues !== undefined) {
getRating.classList.add('rating-' + i);
}
}
+=не добавляет элементы в массив. Вам нуженgetRatingValues.push(...). Как только вы это исправите, все по-прежнему теряет смысл; почему это вообще массив? Что ты пытаешься сделать?