Как добавить несколько кнопок «Читать дальше» и «Читать меньше» через Javascript с помощью getElementsById или ClassName?
все. Недавно я работал над добавлением кнопок «Читать дальше» и «Читать меньше» с помощью Javascript. Я могу сделать это только один раз для одного конкретного элемента, выбрав его идентификатор. Но я хочу, чтобы это повторилось несколько раз для нескольких других подобных элементов. Я попытался сохранить идентификаторы или имена классов в переменной, а затем перебрать ее, но это не сработало. Не могли бы вы взглянуть на код Javascript и подсказать, как я могу добиться такой же функциональности для нескольких других элементов. Вот код для одного элемента, который работает нормально. Я хочу это для нескольких абзацев. Это HTML.
<p style = "font-size:1.1em; margin-top:25px; margin-bottom:15px;">This is Lorem Ipsum. This is Lorem Ipsum. <span id = "dots">...</span> <span style = "display:none;" id = "more"> This is the hidden text. This is the hidden text. </span>
</p>
<a id = "myBtn" style = "cursor:pointer; margin-bottom:1em; font-weight:bold;" onclick = "myFunction()">Show More</a>
Это Javascript.
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read More";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read Less";
moreText.style.display = "inline";
}
}
Теперь в этом случае myFunction () вызывается при нажатии кнопок «Читать дальше» или «Читать меньше». Текст с идентификатором «еще» скрыт, а точки представляют собой точки в конце видимого содержимого.
Теперь я хочу, чтобы это произошло для нескольких абзацев с одинаковыми идентификаторами или именами классов. Я пробовал использовать циклы для достижения этой цели, но получаю сообщение об ошибке «Неперехваченная ошибка myFunction не определена». Я считаю, что неправильно установил цикл.
Был бы признателен, если бы кто-нибудь мог помочь мне найти работоспособное решение этой проблемы. Заранее всем спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете переключить класс, чтобы показать / скрыть промежутки, используя некоторый CSS, например:
document.querySelectorAll(".showmore").forEach(function (p) {
p.querySelector("a").addEventListener("click", function () {
p.classList.toggle("show");
this.textContent = p.classList.contains("show") ? "Show Less" : "Show More";
});
});.showmore {
font-size: 1.1em;
margin-top: 1.5em;
}
.showmore .more, .showmore.show .dots {
display: none
}
.showmore.show .more {
display: inline
}
.showmore a {
cursor: pointer;
display: block;
margin-top: 0.5em;
margin-bottom: 1em;
font-weight: bold;
}<p class = "showmore">This is Lorem Ipsum. This is Lorem Ipsum. <span class = "dots">...</span><span class = "more"> This is the hidden text. This is the hidden text. </span>
<a>Show More</a>
</p>
<p class = "showmore">And here is a second paragraph. <span class = "dots">...</span><span class = "more"> This is the hidden text. This is the hidden text. </span>
<a>Show More</a>
</p>Код сначала перебирает все абзацы, затем захватывает <a> внутри и назначает обработчик кликов.
Спасибо за ваше решение. Работает отлично. Я немного поправил его, так что даже если в абзаце больше одного элемента «a», он все равно работает. Мне очень нравится компактность вашего кода. Еще раз, спасибо.