Невозможно изменить innerHTML дочернего класса для Read More / Read Less Переключить в javascript - PullRequest
Новая
       12

Невозможно изменить innerHTML дочернего класса для Read More / Read Less Переключить в javascript

0 голосов
/ 28 марта 2019

Я создаю ИТ-сайт и использую аккордеон для отображения услуг своих клиентов.Один нажимает на аккордеон, и он расширяется или сжимается, давая описание этой услуги.Я хочу добавить текст для чтения / чтения, который меняется в зависимости от того, открыт аккордеон или нет (что делается с помощью класса is-active. Я не могу изменить innerHTML

Подробнее

текст, потому что это дочерний элемент статьи "accordion is-active".

Я рассмотрел много решений, и они, похоже, не решают проблему, с которой я сталкиваюсь, потому что мне нужнополучить доступ только к дочернему классу элемента, если этот элемент имеет классы «accordion» и «is-active». Я попытался назначить тег Read More с class = "readSwitch" id = "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,Однако, когда я пытаюсь получить прямой доступ к внутреннему HTML-у, используя что-то вроде y [i] .getElementsByClassName ("readSwitch"). InnerHTML = "Read Less";Я получаю сообщение об ошибке «TypeError: y.getElementsByClassName не является функцией. (В« y.getElementsByClassName («readSwitch») »,« y.getElementsByClassName 'не определено) ».Есть ли способы напрямую изменить дочерние классы y innerHTML, используя что-то вроде y.readSwitch.innerHTML = "Read Less"?

РЕДАКТИРОВАТЬ РЕШЕНО !!!: Благодаря Джонатану Хейндлу я смог понять это.Я боролся с этой глупостью в течение 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;";
      }
    }

1 Ответ

0 голосов
/ 28 марта 2019

getElementsByClassName возвращает массив элементов поэтому, если вы хотите сослаться на сам объект, вам нужно добавить индекс впоследствии: 

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

PS: при редактировании текста узла рекомендуется использовать .textContent = "Read LEss", иначе вы перезапишете все дочерние элементы указанного узла

Прим: 

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