Javascript删除控制台中的兄弟姐妹类，但它们保留在html中

debugcn 发表于 Dev

前池

我正在使用JavaScript切换开关，该开关可隐藏文章的所有内容，但不包括文章的第一个元素，当单击它时，可使选定的文章可见。我试图通过给第一个孩子一个特定的班级，然后选择第一个孩子的兄弟姐妹来实现这一目标。

在控制台中，它可以正常工作，并且删除了该类，但是在html中不会发生这种情况，并且兄弟姐妹仍然不可见。

我不能为此项目使用jquery，如果我能用纯JavaScript来获得答案，我会很乐意吗？

var articleContent = document.querySelectorAll('article > *:not(:first-child');
var i;
var k;
var selector;

var h1 = document.querySelectorAll('article > *:first-child');

console.log(h1);
console.log(articleContent);

for (i = 0; i < articleContent.length; i += 1) {
  articleContent[i].classList.add('invisible');

};

for (i = 0; i < h1.length; i += 1){
  var j = i;
  h1[j].className = "click" + j;
  h1[j].onclick = function(){
    selector = document.querySelectorAll("." + h1[j].className + " ~ *");
    for (k = 0; k < selector.length; k += 1){
      var l = k;
      selector[k].classList.remove('invisible');
      console.log(selector[k]);
    }
  }
}

.invisible {
  display: none;
}

<main>
  <article>
    <h1>Article 1</h1>

    <section>
      <h2>Sub-title</h2>

      <p>Foo 1</p>
      <p>Foo 2</p>
    </section>

    <section>				
      <p>Foo 3</p>
    </section>

  </article>
</main>



<article>
  <h1>Article 2</h1>
  <section>
    <p>Foo 4</p>
    <p>Foo 5</p>
  </section>
</article>

<article>
  <h1>Article 3</h1>
  <section>
    <p>Foo 6</p>
    <p>Foo 7</p>
  </section>
</article>

TJ人群

前言：在您的代码中，您仅依赖于现代浏览器中提供的功能，因此我在下面做了同样的事情。

因此，代码的目标是隐藏所有文章，然后h1在单击其中的第一个孩子（当前是）时显示/隐藏文章？

如果是这样，我可能会稍微改变一下CSS，这会使JavaScript变得简单得多：

// I always avoid creating global variables where possible
(function() {
  // A handy function for looping through QSA results
  var forEach = Array.prototype.forEach;
  
  // Loop through all articles...
  forEach.call(document.querySelectorAll('article'), function(article) {
    // ...collapsing them...
    article.classList.add('collapsed');
    
    // ...and adding a click handler to the first element
    // to toggle whether the article is hidden
    article.firstElementChild.addEventListener("click", function() {
      article.classList.toggle('collapsed');
    }, false);
  });
})();

article.collapsed *:not(:first-child) {
  display: none;
}

<main>
  <article>
    <h1>Article 1</h1>

    <section>
      <h2>Sub-title</h2>

      <p>Foo 1</p>
      <p>Foo 2</p>
    </section>

    <section>				
      <p>Foo 3</p>
    </section>

  </article>
</main>



<article>
  <h1>Article 2</h1>
  <section>
    <p>Foo 4</p>
    <p>Foo 5</p>
  </section>
</article>

<article>
  <h1>Article 3</h1>
  <section>
    <p>Foo 6</p>
    <p>Foo 7</p>
  </section>
</article>

或者，如果您想显示一篇文章以隐藏所有其他文章，那也很简单：

// I always avoid creating global variables where possible
(function() {
  // A handy way to loop through QSA results
  var forEach = Array.prototype.forEach;
  
  // Loop through all articles...
  forEach.call(document.querySelectorAll('article'), function(article) {
    // ...collapsing the article...
    article.classList.add('collapsed');
    
    // ...and adding a click handler to the first element
    // child, which:
    article.firstElementChild.addEventListener("click", function() {
      // Checks to see if this article is hidden
      if (article.classList.contains('collapsed')) {
        // Yes: Hide others, show this
        forEach.call(document.querySelectorAll('article:not(.collapsed)'), function(a) {
          a.classList.add('collapsed');
        });
        article.classList.remove('collapsed');             
      } else {
        // No: Just hide this
        article.classList.add('collapsed');
      }
    }, false);
  });
})();

article.collapsed *:not(:first-child) {
  display: none;
}

<main>
  <article>
    <h1>Article 1</h1>

    <section>
      <h2>Sub-title</h2>

      <p>Foo 1</p>
      <p>Foo 2</p>
    </section>

    <section>				
      <p>Foo 3</p>
    </section>

  </article>
</main>



<article>
  <h1>Article 2</h1>
  <section>
    <p>Foo 4</p>
    <p>Foo 5</p>
  </section>
</article>

<article>
  <h1>Article 3</h1>
  <section>
    <p>Foo 6</p>
    <p>Foo 7</p>
  </section>
</article>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。