Question

我正在建立一个IT网站，并且正在使用手风琴来显示我的客户服务。只需单击一下手风琴，它就会展开或收缩，以描述该服务。我想添加更多/更少的文本，该文本根据手风琴是打开还是关闭而改变（使用is-active类完成。我无法更改

文本，因为它是“手风琴处于活动状态”文章的子元素。

我查看了许多解决方案，但它们似乎并没有解决我面临的问题，因为如果该元素同时具有“手风琴”和“处于活动状态”，则仅需要访问该元素的子类。 ”课程。我尝试将class =“ readSwitch” id =“ readSwitch”的Read More标记分配给一个变量，然后将该变量更改为html，例如z.innerHTML =“ Read Less”，但z是y.getElementsByClass（“ readSwitch”）的副本，而不是实际元素。如何直接访问同时包含“手风琴处于活动状态”类的元素的“ 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”）。innerHTML =“ Read Less”;来直接访问y的内部HTML时；我收到一个错误“ TypeError：y.getElementsByClassName不是函数。（在y.getElementsByClassName（“ readSwitch”）'中，'y.getElementsByClassName'未定义）”。有什么方法可以使用y.readSwitch.innerHTML =“ Read Less”之类的方法直接修改y的子类innerHTML？

已解决编辑问题！！！：多亏了乔纳森·海因德尔，我才得以弄清楚。我一直在为这愚蠢的事情苦苦挣扎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

Bsp：

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);
  }

无法在javascript

1 个答案: