Question

我正在尝试设置单个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."];

Answer 1

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

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

我认为这段代码可以解决您的问题：

const elements = document.querySelectorAll('.level-wrapper');

function showStyle(index, childIdx) {
  elements[index].children[childIdx].style.opacity = '1';
  elements[index].children[childIdx].style.backgroundColor = '#95a5a6';
  elements[index].children[childIdx].style.border = '2px solid white';
  elements[index].children[childIdx].style.boxSizing = 'border-box';
  //console.log(levelStyle[index]);
}

function hideStyle(index, childIdx) {
  elements[index].children[childIdx].style.opacity = '1';
  elements[index].children[childIdx].style.backgroundColor = 'transparent';
  elements[index].children[childIdx].style.border = 'none';
  elements[index].children[childIdx].style.boxSizing = 'unset';
  //console.log(levelStyle[index]);
}

/*for (let i = 0; i < elements.length; i++) {
  for (let j = 0; j < elements[i].children.length; j++) {
    showStyle(i,j);
  }
}*/

for (let i = 0; i < elements.length; i++) {
  for (let j = 0; j < elements[i].children.length; j++) {
    (function (index) {
      elements[i].children[j].onclick = function () {
      elements[i].children[j].is_show = !elements[i].children[j].is_show;
      if (elements[i].children[j].is_show) {
        showStyle(i,j);
      } else {
        hideStyle(i,j);
      }
      }
    })(j + i*elements[i].children.length);
  }
}

<div class="level-wrapper">
  <div>aaa</div>
  <div>bbb</div>
  <div>ccc</div>
  <div>ddd</div>
</div>
<br><br>
<div class="level-wrapper">
  <div>eee</div>
  <div>fff</div>
  <div>ggg</div>
  <div>hhh</div>
</div>

Answer 2

这种方法最终对我有用。这是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();

这是html：

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

最后是CSS：

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

根据点击样式设置和更改子级的文本内容

2 个答案: