如何使用 vanilla JavaScript 在 Ul li 上设置默认值并删除 class？

Question

我有两个相同的 ul class，我试图实现的概念是当单击活动 li 时边框颜色会发生变化。我在这方面取得了成功，我需要的概念是我希望在第一个 ul li 上显示默认的相同边框颜色，如果我单击其他，它应该被删除并且颜色应该应用于单击的边框颜色。到目前为止我已经尝试过的代码。

任何帮助将不胜感激！！

var x = document.querySelectorAll('.random-value li');
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function() {

        var selectedEl = document.querySelector(".selected");
        if (selectedEl) {

            selectedEl.classList.remove("selected");
        }
        this.classList.add("selected");

    }, false);
};

.random-value li{
        margin: 0 0 15px 0;
        border: 1px solid green;
        padding: 15px 26px;
    }
    .random-value .selected{
     border: 1px solid red;
    }

<ul id="first" class="random-value">
<li>200 </li>
<li>2010 </li>
<li>2100 </li>
<li>2030 </li>
</ul>

Answer 1

我想这就是你要找的，

//Making first option as Highlighted
document.querySelectorAll('.random-value li')[0].classList.add("selected"); 

var x = document.querySelectorAll('.random-value li');
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function() {

        var selectedEl = document.querySelector(".selected");
        if (selectedEl) {

            selectedEl.classList.remove("selected");
        }
        this.classList.add("selected");

    }, false);
};

.random-value li{
        margin: 0 0 15px 0;
        border: 1px solid green;
        padding: 15px 26px;
    }
    .random-value .selected{
     border: 1px solid red;
    }

<ul id="first" class="random-value">
<li>200 </li>
<li>2010 </li>
<li>2100 </li>
<li>2030 </li>
</ul>

如何使用 vanilla JavaScript 在 Ul li 上设置默认值并删除 class？

How to have default and remove class on Ul li using vanilla JavaScript?

html

javascript

css

addeventlistener

queryselector