Javascript удаляет класс siblings в консоли, но они остаются в html

Question

Я работаю над javascript-переключателем, который скрывает все, кроме первых элементов статьи, и при нажатии на него отображает выбранную статью. Я попытался сделать это, предоставив первому ребенку определенный класс, а затем выбрав братьев и сестер первого ребенка.

В консоли он работает, и класс удален, но это не происходит в html, и братья и сестры остаются невидимыми.

Я не могу использовать jquery для этого проекта, я бы хотел, чтобы я мог получить anwsers в простом 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> \t \t \t \t 
 
     <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>

Answer 1

Предисловие: В своем коде, вы полагаетесь на особенности присутствуют только в современных браузерах, так что я сделал то же ниже.

---

Таким образом, цель коды, чтобы скрыть все статьи, а затем показать/скрыть статью, когда первый ребенок (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> \t \t \t \t 
 
     <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> \t \t \t \t 
 
     <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>