Javascript 基于单击设置子对象的样式并更改其文本内容

我正在尝试设置单个div的样式，并根据用户是否单击该项来更改文本内容

目前，代码是非常重复的，我正在寻找一种方法，可以帮助我重写它，使其工作更有效，看起来更干净

多谢各位

let lvl0,
lvl1,
lvl2;

lvl0 = document.querySelector('.level-wrapper').children[0];
lvl1 = document.querySelector('.level-wrapper').children[1];
lvl2 = document.querySelector('.level-wrapper').children[2];

lvl0.addEventListener('click', changeStyle0);
lvl1.addEventListener('click', changeStyle1);
lvl2.addEventListener('click', changeStyle2);

function changeStyle0() {
  document.querySelector('.text-header').textContent = levelTitle[0];

  var showStyle = document.querySelector('.level-wrapper').children[0];
  showStyle.style.opacity = '1';
  showStyle.style.backgroundColor = '#95a5a6';
  showStyle.style.border = '2px solid white';
  showStyle.style.boxSizing = 'border-box';
  console.log(showStyle);
}

function changeStyle1() {
  document.querySelector('.text-header').textContent = levelTitle[1];

  var showStyle = document.querySelector('.level-wrapper').children[1];
  showStyle.style.opacity = '1';
  showStyle.style.backgroundColor = '#95a5a6';
  showStyle.style.border = '2px solid white';
  showStyle.style.boxSizing = 'border-box';
  console.log(showStyle);
}

function changeStyle2() {
  document.querySelector('.text-header').textContent = levelTitle[2];

  var showStyle = document.querySelector('.level-wrapper').children[2];
  showStyle.style.opacity = '1';
  showStyle.style.backgroundColor = '#95a5a6';
  showStyle.style.border = '2px solid white';
  showStyle.style.boxSizing = 'border-box';
  console.log(showStyle);
}

var levelTitle = ["Question about Drinks/Soda/Water.", "Question about Portion Control/Meals.", "Question about Salt/Sugar."];

方法document.querySelector只返回文档中适合选择器的第一个元素。要获得文档中所有fits元素的数组，必须使用document.querySelectorAll方法。例如：

const elements = document.querySelectorAll('.level-wrapper');
elemets[2].children[0].style = ...;

我认为此代码解决了您的问题：

const elements=document.queryselectoral'.level wrapper'； 函数showStyleindex，childIdx{ 元素[index].children[childIdx].style.opacity='1'； 元素[index].children[childIdx].style.backgroundColor='95a5a6'； 元素[index].children[childIdx].style.border='2px纯白'； 元素[index]。子元素[childIdx]。style.boxSizing='border box'； //console.loglevelStyle[index]； } 函数hideStyleindex，childIdx{ 元素[index].children[childIdx].style.opacity='1'； 元素[index].children[childIdx].style.backgroundColor='transparent'； 元素[index].children[childIdx].style.border='none'； 元素[index].children[childIdx].style.boxsize='unset'； //console.loglevelStyle[index]； } /*对于let i=0；i.长度；i++{ 对于设j=0；j<元素[i]。children.length；j++{ showStylei，j； } }*/ 对于let i=0；i.长度；i++{ 对于设j=0；j<元素[i]。children.length；j++{ 功能指标{ 元素[i]。子元素[j]。onclick=函数{ 元素[i]。子元素[j]。is_show=！元素[i]。子元素[j]。is_show； if元素[i].子元素[j]是否显示{ showStylei，j； }否则{ hideStylei，j； } } }j+i*元素[i].children.length； } } aaa bbb ccc ddd eee fff ggg 啊

---

这种方法最终对我有效。 下面是Javascript：

function styleChange() {
  const elements = document.getElementsByClassName("level");
  for (let i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {

  let el = elements[0];
  while (el) {
    if (el.tagName === "LI") {
       el.classList.remove("active");
     }
     el = el.nextSibling;
    }
    this.classList.add("active");
  };
 }
}
styleChange();

---

感谢您的回复，我非常感谢。尽管如此，代码还是对所有div进行了样式化，而不是只对正在单击的div进行样式化。@Joshuagaria我编辑了代码片段，现在就试试吧。当您单击元素时，它会对其进行样式设置，然后在第二次单击时取消样式设置。代码并没有完全按照我的预期工作。我最终找到了答案。再次感谢你一路帮助我。

<ul class="level-wrapper">
    <li class="level">
      <a href="#" class="level-link"></a>
      </a>1</li>
    <li class="level">
      <a href="#" class="level-link"></a>
      </a>2</li>
    <li class="level">
      <a href="#" class="level-link"></a>
      </a>3</li>
</ul>

.active {
  background-color: #95a5a6;
  opacity: 1;
  box-sizing: border-box;
  border: 2px solid #fff;
}