#javascript #html #css
Вопрос:
У меня есть функция «больше читать меньше читать» с html и js, функция отлично работает с одним абзацем, когда я снова использую другой абзац, затем вторая функция не работает, я хотел бы использовать несколько раз на одной странице, пожалуйста, проверьте
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";
}
} <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span id="dots">...</span><span id="more"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button onclick="myFunction()" id="myBtn" class="rm">READ MORE</button>
</div> Комментарии:
1. вам интересно, почему это не работает изначально?
2. Непонятно, о чем вы спрашиваете. Но если вы планируете использовать несколько из них на одной странице, вам нужно будет настроить функцию для получения идентификатора (поскольку вы получаете элемент по жестко закодированному идентификатору) или использовать более хитрые средства определения того, какой элемент находится ближе всего к кнопке(кнопкам) «Читать больше/меньше». Наличие элементов с повторяющимися идентификаторами может привести к очень странному (неправильному) поведению, поэтому не делайте этого.
3. Как вы реализовали это для нескольких абзацев? Можете ли вы добавить демонстрацию этого с проблемой?
4. Вы можете написать свою логику, основанную на структуре, а не
id
Ответ №1:
Вы можете попытаться найти различные элементы по отношению к кнопке, на которую был нажат. Вы также можете использовать имя класса вместо идентификатора для выбора элементов.
function myFunction(event) {
const parentSibling = event.target.parentElement.previousElementSibling;
const dots = parentSibling.querySelector(".dots");
const moreElement = parentSibling.querySelector(".more");
const btnElement = event.target;
if (dots.style.display === "none") {
dots.style.display = "inline";
btnElement.innerHTML = "READ MORE";
moreElement.style.display = "none";
} else {
dots.style.display = "none";
btnElement.innerHTML = "READ LESS";
moreElement.style.display = "inline";
}
} <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button onclick="myFunction(event)" class="myBtn" class="rm">READ MORE</button>
</div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button onclick="myFunction(event)" class="myBtn" class="rm">READ MORE</button>
</div> Вы также можете использовать один обработчик в родительском элементе, который будет выполнять логику на основе щелкнутого элемента myBtn .
function myFunction(event) {
event.preventDefault();
if(!event.target.classList.contains('myBtn')) {
return;
}
const parentSibling = event.target.parentElement.previousElementSibling;
const dots = parentSibling.querySelector(".dots");
const moreElement = parentSibling.querySelector(".more");
const btnElement = event.target;
if (dots.style.display === "none") {
dots.style.display = "inline";
btnElement.innerHTML = "READ MORE";
moreElement.style.display = "none";
} else {
dots.style.display = "none";
btnElement.innerHTML = "READ LESS";
moreElement.style.display = "inline";
}
} <div onclick="myFunction(event)">
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button class="myBtn" class="rm">READ MORE</button>
</div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more" style="display: none"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
<div class="col-md-12">
<button class="myBtn" class="rm">READ MORE</button>
</div>
</div> Комментарии:
1. Это работает, большое вам спасибо, ваше драгоценное время очень ценится!