Как реализовать функцию отображения toogle в цикле forEach? - PullRequest
0 голосов
/ 28 декабря 2018

Мне нужно установить ссылки «читать дальше», чтобы переключать отображение оставшегося содержимого при нажатии.

Скрипт перебирает элементы абзаца в модуле DIVs.Он пропускает первый элемент p и скрывает остальные элементы p, используя свойство style.Элемент a создается для каждой итерации и добавляется после первого элемента p.При нажатии на элемент a должны отображаться скрытые элементы p.Как переписать toggleCopy в функцию цикла forEach?

<div class="module">
  <h2>Sample Heading</h2>
  <p>
  Project summary paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing.
  </p>
  <p>
  Project development changes paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dignissim enim sit amet venenatis urna cursus.
  </p>
</div>

Ток для цикла с функцией newLink, добавленной с использованием addEventListerner.

// Use for loop to select all 'p' elements
function toggleCopy(e) {
  for(let i = 0; i < allParagraphs.length; i++) {
    // Assign each iteration to 'para'
    let para = allParagraphs[i];
    // If the iteration is the first 'p' element, bypass and continue the loop
    if(i === 0) {
      continue;
    }
    // For all remaining 'p' elements, set the 'display' to 'block' if currently set to'none',
    // if 'display' is not set, set it to 'none'
    if(para.style.display === 'none') {
      para.style.display = 'block';
    } else {
      para.style.display = 'none';
    }
  }
  // If the newLink 'a' element has been clicked, remove it from the DOM
  if(this === newLink) {
    this.remove();
  }
  // Check the 'e' event behaviour, and if it is not 'undefined' set 'e.preventDefault' to prevent
  // the default 'href' behaviour
  if(e !== undefined && e.preventDefault !== undefined) {
    e.preventDefault(); 
  }
}

// Set the event listener on the newLink 'a' element to be 'click', and assign the 'toggleCopy'
// function
newLink.addEventListener('click', toggleCopy);

Новая функция forEach.Куда подойдет функция toggleCopy?

// Create an anonymous function that executes immediately on load
(function() {
  // Select all of the '.module' divs in the '.modules' parent div    
  let modules = document.querySelectorAll('.module');

  modules.forEach(function (module) {
    let ps = module.querySelectorAll('p');
    let fps = ps[0];

    ps.forEach(function (p, i) {
      // Create 'a' element, and assign to newLink constant
      const newLink = document.createElement('a');

      // Set 'href' and 'class' attributes for the 'a' element
      newLink.setAttribute('href', '#');
      newLink.setAttribute('class', 'read-more');

      // Set the innerHTML text for the 'a' element
      newLink.innerHTML = 'Read more';

      newLink.addEventListener('click', function(e) {
        if(this === newLink) {
          this.remove();
        }
        if(e !== undefined && e.preventDefault !== undefined) {
          e.preventDefault(); 
        }

        if(p.style.display === 'none') {
          p.style.display = 'block';
        }
      });

      if(i === 0) {
        return;
      }
      p.style.display = 'none';

      fps.appendChild(newLink);
    });
  });
}());
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...