JavaScript-使用If语句更改具有相同ID的多个元素的背景色-堆栈溢出

顺晟科技

2022-10-19 11:41:46

132

在Javascript中没有那么高级，但希望基于获取元素编号结果来更改多个ID的背景，在if语句中运行它以确定它将获得的背景颜色，并将该类添加到elements类中。在这方面挣扎了很多，所以任何帮助都将非常感谢。请不要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

<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>

JavaScript

<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>

================================== 更新了Javascript，但出于某种原因，它仍然不会根据数字

添加类

<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>

顺晟科技：

ID必须唯一。

只需用类命名它们，然后移到js。

新的JS开发人员无需使用任何高级代码的最简单方法。

计算找到多少具有此名称的类:

现在您得到了可以循环的类的数量。例如:

好吧，我想你只是误解了ID属性的概念。每个元素的ID值必须唯一。如果页中有重复的ID值，则只考虑第一个。

因此，您可以给元素一个公共类并替换

与

就这样！

上一篇：如何修复这个（简单HTML/CSS）下一篇：html图像向左浮动?HTML-如何

网站建设

Html

JavaScript-使用If语句更改具有相同ID的多个元素的背景色-堆栈溢出