Question

我正在我的页面上输入一个显示/隐藏范围标记，其中单击时将显示其下方的段落，并在再次单击时再次隐藏它。

我以前通过在元素上设置多个ID来完成此操作，例如：

function pageLoad() {
  display();
  noDisplay();
}
function display() {
  var here = document.getElementById('one');
  var more = document.getElementById('show')

  function visible() {
    more.style.display = 'block';
    here.style.display = 'none';
  }
  here.addEventListener('click', visible);
}

function noDisplay() {
  var hide = document.getElementById('hide');
  var less = document.getElementById('show');
  var more = document.getElementById('one');

  function inVisible() {
    less.style.display = 'none';
    more.style.display = 'block';
  }
  show.addEventListener('click', inVisible);
}

window.onload = pageLoad();

<p>Some Text</p>
<span id="one"> Show more... </span>
<p id="show" style="display: none;">Some more text... <br /><span id="hide">Less text</span></p>

然而，这导致了大量过多的代码。所以我尝试用queryselector来做，但我无法弄清楚在这个函数中输入第二个queryselector的位置。这是我在代码段中的当前代码，它返回一个错误，因为我不知道在哪里输入第二个queryselector，所以它不起作用：

function startUp() {
  showText();
}

function showText() {
  var clicker = document.getElementsByClassName('display');
  var show = document.getElementsByClassName('showandhide');
  for (let i = 0; i < clicker.length; i++) {
    clicker[i].addEventListener('click', function() {
      if (clicker[i].querySelector('show').style.display == 'none') {
        show.style.display = 'inline-block';
      } else
        show.style.display = 'none';
    });
  };
}

window.onload = startUp;

<p>Some Text</p><span class="display"> ...Continue reading... </span>
<p class="showandhide">Some More Text...</p>
<p>Some Text</p><span class="display"> ...Continue reading... </span>
<p class="showandhide">Some More Text...</p>
<p>Some Text</p><span class="display"> ...Continue reading... </span>
<p class="showandhide">Some More Text...</p>

我是否需要为某个地方的第二个for输入另一个queryselector循环，或者我是否需要在className之后更改eventListener以表示该类额外的文字？这是我第一次尝试这样做，而不是以前的多个ID和过多代码的方法。我在谷歌搜索嵌套for循环和queryselectors并没有什么好处。

Answer 1

发布此答案，以便其他人可能受益... 在成员将其分解为逻辑部分之后，我努力为show类放置第二个循环，我想出来了。

function startUp() {
  showText();
}

function showText() {
  var clicker = document.getElementsByClassName('display');
  var show = document.getElementsByClassName('showandhide');
  for (let i = 0; i < clicker.length; i++) {
    clicker[i].addEventListener('click', function() {
      for (let x = 0; x < show.length; x++) {
        if (show[x].style.display == "none") {
          show[x].style.display = 'inline-block';
        } else
          show[x].style.display = 'none';
      };
    });
  };
}
window.onload = startUp();

.showandhide {
  display: none;
}

<p>Some Text...</p><span class="display"> ...Continue reading... </span>
<p class="showandhide">Some Other Text</p>

我必须遍历“clicker”循环中的“show”类，然后应用该样式。

使用多个queryselector循环多个类

1 个答案: