无法在javascript中更改Read More / Read Less Toggle更改子类的innerHTML

Question

我正在建立一个IT网站，我正在使用手风琴来显示我的客户服务。单击手风琴，它会扩展或收缩，给出该服务的描述。我想添加一个读取更多/读取更少的文本，这些文本会根据手风琴是打开还是关闭而改变（这是使用is-active类完成的。我无法更改内部HTML的

阅读更多

text because it is the child element of the "accordion is-active" article.

我已经看了很多解决方案，它们似乎没有解决我面临的问题，因为我需要访问元素的子类，只要该元素同时包含“accordion”和“is-active”类。我已经尝试将带有class =“readSwitch”id =“readSwitch”的Read More标签分配给变量并更改变量html，例如z.innerHTML =“Read Less”但z是y.getElementsByClass（“readSwitch”）的副本，而不是实际元素。如何直接访问包含“accordion is-active”类的元素的“readSwitch”类？

JavaScript的

  function readToggle() {
      var x = document.getElementById("accordions");
      var y = x.getElementsByClassName("accordion is-active");
      var i;
      for (i = 0; i < y.length; i++) {
        var z = y[i].getElementsByClassName("readSwitch");
        z.innerHTML = "Read Less";
        console.log(z.innerHTML);
      }

    }

HTML

<section class="accordions" id="accordions">
        <article class="accordion is-active">
          <div class="accordion-header toggle" onclick="readToggle()">
            <p>
              Custom Built Computers
            </p>
            <p style="font-size:10px" class="readSwitch" 
            id="readSwitch">
              Read More
            </p>
          </div>
          <div class="accordion-body">
            <div class="accordion-content">
              blah blah blah
            </div>
          </div>
        </article>
</section>

问题是z是y的副本，因此更改它不会更新DOM。然而，当我尝试使用y [i] .getElementsByClassName（“readSwitch”）之类的东西直接访问y的内部HTML时.innerHTML =“Read Less”;我收到错误“TypeError：y.getElementsByClassName不是函数。（在'y.getElementsByClassName（”r​​eadSwitch“）'，'y.getElementsByClassName'未定义）”。有没有办法直接修改y的子类innerHTML使用y.readSwitch.innerHTML =“Read Less”？

编辑已解决！ ：感谢jonathan Heindl，我能够弄明白。我已经在这个愚蠢的事情上苦苦挣扎了3天，并且在互联网上找不到任何解决方案所以我发布了我的Javascript解决方案，阅读更多阅读更少在这里为其他人切换。此解决方案适用于上面的HTML。

  document.onclick = function () {
      //variables for accordions with is-active
      var x = document.getElementById("accordions");
      var y = x.getElementsByClassName("accordion is-active");

      //variables for accordions with just accordion class, exclude those with "is-active"
      var noless = document.querySelectorAll('article.accordion:not(.is-active)');

      //Update all accordions with is-active to read less
      var i;
      for (i = 0; i < y.length; i++) {
        y[i].getElementsByClassName("readSwitch")[0].innerHTML = "Read Less &uarr;";
      }

      //update accordions without is-active class to read more
      var w;
      for (w = 0; w < noless.length; w++) {
        noless[w].getElementsByClassName("readSwitch")[0].innerHTML = "Read More &darr;";
      }
    }

Answer 1

getElementsByClassName返回一个元素数组，所以当你想引用对象本身时，你需要在之后添加索引：

y[i].getElementsByClassName("readSwitch")[0].innerHTML

PS：编辑节点文本时，建议使用.textContent = "Read LEss"，否则将覆盖所述节点的所有childElements

例如：

let x = document.getElementById("accordions");
let y = x.getElementsByClassName("accordion is-active");//maybe x.children depending on the structure
for (let i = 0; i < y.length; i++) {
    let z = y[i].getElementsByClassName("readSwitch")[0];
    z.textContent= "Read Less";
    console.log(z.textContent);
  }