Измените цвета фона нескольких элементов с одним и тем же идентификатором, используя оператор If

avatar
Fireal
9 августа 2021 в 00:51
114
2
0

Не очень продвинутый с Javascript, но я хочу изменить фон нескольких идентификаторов на основе получения результата количества элементов, запуская его через мой оператор if, чтобы определить, какой цвет фона он получит, и добавляя этот класс к классу элементов. Немного борюсь с этим, поэтому любая помощь будет принята с благодарностью. Пожалуйста, не используйте jQuery.

HTML

<ul class="listview image-listview text">
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Strength</div>
                        <span id="skill-badge" class="badge">38</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Agility</div>
                        <span id="skill-badge" class="badge">52</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Endurance</div>
                        <span id="skill-badge" class="badge">66</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Athleticism</div>
                        <span id="skill-badge" class="badge">49</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#" class="item">
                    <div class="in">
                        <div>Resilience</div>
                        <span id="skill-badge" class="badge">26</span>
                    </div>
                </a>
            </li>
        </ul>

CSS

.sb-default {
    background:rgb(66, 66, 66);
    color:white;
}

.sb-terrible {
    background:rgb(71, 0, 0);
    color:white;
}

.sb-poor {
    background:rgb(192, 64, 13);
    color:white;
}

.sb-avg {
    background:rgb(223, 167, 13);
    color:white;
}

.sb-aboveavg {
    background:rgb(204, 191, 8);
    color:white;
}

.sb-good {
    background:rgb(129, 194, 8);
    color:white;
}

.sb-excellent {
    background:rgb(90, 223, 13);
    color:white;
}

JavaScript

var el = document.querySelectorAll('#skill-badge');
for (var i = 0; i < el.length; i++) {
    var currentEl = el[i];
var class_name;

if (currentEl < 10) {
    class_name = 'sb-terrible';
} else if (currentEl < 25) {
    class_name = 'sb-poor';
} else if (currentEl < 50) {
    class_name = 'sb-avg';
} else if (currentEl < 75) {
    class_name = 'sb-aboveavg';
} else if (currentEl < 95) {
    class_name = 'sb-good';
} else if (currentEl < 100) {
    class_name = 'sb-excellent';
}else {
    class_name = 'sb-default';
}

el.className += ' ' + class_name;
}

============================= Обновлен Javascript, но по какой-то причине он по-прежнему не добавляет класс на основе номера

.
var el = document.querySelectorAll('.skill-badge');
var val = parseInt(el.innerText);
var class_name;

if (val < 10) {
    class_name = 'sb-terrible';
} else if (val < 25) {
    class_name = 'sb-poor';
} else if (val < 50) {
    class_name = 'sb-avg';
} else if (val < 75) {
    class_name = 'sb-aboveavg';
} else if (val < 95) {
    class_name = 'sb-good';
} else if (val < 100) {
    class_name = 'sb-excellent';
}else {
    class_name = 'sb-default';
}

el.className += ' ' + class_name;
Источник
j08691
9 августа 2021 в 02:31
2

Идентификаторы должны быть уникальными

Atal Shrivastava
9 августа 2021 в 02:54
0

Проблема в том, что document.querySelectorAll('.skill-badge'); и в вашем html у вас все еще есть id="skill-badge". Не существует класса с именем skill-badge.

Ответы (2)

avatar
Ahmed Ibrahim
9 августа 2021 в 03:35
-1

Идентификатор должен быть уникальным.

Просто назовите их классами, а затем перейдите к js.

Самый простой способ для новых разработчиков JS без использования дополнительных кодов.

Подсчет количества найденных классов с этим именем:

    var number_of_elements = document.getElementsByClassName('your_class_name').length;

Теперь вы получите количество классов, которые вы можете зациклить на них. Например:

var i =0;
while (i<number_of_elements) {
  document.getElementsByClassName('your_class_name')[i].style.backgroundColor= 'red';
  //selecting each class and changing it's backgroundcolor
  i++;
} 
Ouroborus
9 августа 2021 в 05:58
0

В то время как ваша общая стратегия в порядке, реализация ужасна.

Ahmed Ibrahim
10 августа 2021 в 09:37
0

Я просто хотел рассказать о технике очень простым способом, понятным новичку.

avatar
Farhad Rad
9 августа 2021 в 00:59
3

Ну, я думаю, вы просто неправильно поняли концепцию атрибута ID. Значение идентификатора для каждого элемента должно быть уникальным. Если на странице есть повторяющееся значение идентификатора, будет учитываться только первое.

Поэтому можно присвоить элементам общий класс и заменить

var el = document.querySelectorAll('#skill-badge');

с

var el = document.querySelectorAll('.common-class-name');

и вот!

Fireal
9 августа 2021 в 02:29
0

Обновите javascript, но он все равно не добавит класс на основе числового результата.

Arleigh Hix
9 августа 2021 в 02:45
0

@Fireal теперь ваш var el является NodeList, вам нужно пройти через него: gomakethings.com/es6-foreach-loops-with-vanilla-javascript/…