Мне нужно установить ссылки «читать дальше», чтобы переключать отображение оставшегося содержимого при нажатии.
Скрипт перебирает элементы абзаца в модуле 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);
});
});
}());