Кнопка Readmore для нескольких делений

Question

Я пытаюсь сделать так, чтобы каждый раз, когда вы нажимали кнопку «Lees meer», она отображала больше текста. Код ниже работает для 1, но когда я добавил несколько div с той же функцией, он больше не работает ... Может кто-нибудь помочь мне сделать так, чтобы каждый раз, когда вы нажимаете кнопку, он отображал больше текста?

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 = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Lees minder";
    moreText.style.display = "inline";
  }
}

#more {
  display: none;
}

Answer 1

Проблема, вызванная методом document.getElementById() в теле myFunction(), который выполняет поиск для одного совпадающего элемента (первый в случае нескольких совпадений).

Итак, что вам нужно, в основном:

• удалить неуникальные id из ваших HTML (так как это нарушает уникальность этого атрибута, который подразумевает название)
• use class атрибут для отметки всех ваших элементов, которые должны вести себя одинаково
• pass event.target как параметр myFunction() для обработки указанного c только абзаца

Эта концепция (обрезанная для простоты и адаптированная как можно ближе к существующей базе кода) будет выглядеть так:

function myFunction(p) {
  const parent = p.parentElement,
        moreText = parent.getElementsByClassName("more")[0],
        btnText = parent.getElementsByClassName("myBtn")[0],
        dots = parent.getElementsByClassName('dots')[0]

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Lees minder";
    moreText.style.display = "inline";
  }

}

.more {
  display: none;
}

<div id="spidermanMovie">
  <h2> Movie 1</h2>
  <p>Short story 1.
    <span class="dots">...</span><span class="more">The rest of story 1</span></p>
  <button onclick="myFunction(this)" class="myBtn">Lees meer</button>
</div>

<div id="deadpoolMovie">
  <h2> Movie 2</h2>
  <p>Short story 2.
    <span class="dots">...</span><span class="more">The rest of story 2</span></p>
  <button onclick="myFunction(this)" class="myBtn">Lees meer</button>
</div>


<div id="thorMovie">
  <h2>Movie 3</h2>
  <p>Short story 3.
    <span class="dots">...</span><span class="more">The rest of story 3</span></p>
  <button onclick="myFunction(this)" class="myBtn">Lees meer</button>
</div>

Однако, чтобы сделать вашу деталь HTML немного чище и проще в обслуживании, я бы заменил встроенные атрибуты onclick на одиночные обратный вызов слушателя событий (EventTarget.addEventListener()), прикрепленный к соответствующим элементам в вашем файле JavaScript.

Answer 2

Я думаю, это будет исправление для вашей проблемы с наименьшим количеством изменений к вашему html markup и без изменений к вашему css.

В основном я использовал вашу функцию javascript, и теперь вам даже не нужно больше ее вызывать!

Пожалуйста note что ids is 'html' должны быть уникальными , это было причиной вашей проблемы. Надеюсь, это поможет!

var moreBtn = document.getElementsByClassName("myBtn");

var toggleMoreText = function() {

  const parent = this.parentElement,
        moreText = parent.getElementsByClassName("more")[0],
        btnMore = parent.getElementsByClassName("myBtn")[0],
        dots = parent.getElementsByClassName('dots')[0];

  // console.log(moreText.textContent);
  
  if (dots.style.display === "none") {
    dots.style.display = "block";
    btnMore.innerHTML = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnMore.innerHTML = "Lees minder";
    moreText.style.display = "block";
  }
};

for (var i = 0; i < moreBtn.length; i++) {
    moreBtn[i].addEventListener('click', toggleMoreText, false);
}

.more {
  display: none;
}

<div id="spidermanMovie">
  <h2> Spider-man: Homecomming.</h2>
  <p>Short story 1.
    <span class="dots">...</span>
    <span class="more">The rest of story 1</span></p>
  <button class="myBtn">Lees meer</button>
</div>

<div id="deadpoolMovie">
  <h2> Deadpool</h2>
  <p>Short story 2.
    <span class="dots">...</span>
    <span class="more">The rest of story 2</span></p>
  <button class="myBtn">Lees meer</button>
</div>


<div id="toystoryMovie">
  <h2> Toy Story 2</h2>
  <p>Short story 3.
    <span class="dots">...</span>
    <span class="more">The rest of story 3</span></p>
  <button class="myBtn">Lees meer</button>
</div>

Answer 3

Вам необходимо иметь разные идентификаторы диапазона для dot1 и dot2 . Различные идентификаторы для кнопок.

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 = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Lees minder";
    moreText.style.display = "inline";
  }
}

function myFunction1() {
  var dots1 = document.getElementById("dots1");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn1");

  if (dots1.style.display === "none") {
    dots1.style.display = "inline";
    btnText.innerHTML = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots1.style.display = "none";
    btnText.innerHTML = "Lees minder";
    moreText.style.display = "inline";
  }
}

function myFunction2() {
  var dots2 = document.getElementById("dots2");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn2");

  if (dots2.style.display === "none") {
    dots2.style.display = "inline";
    btnText.innerHTML = "Lees meer";
    moreText.style.display = "none";
  } else {
    dots2.style.display = "none";
    btnText.innerHTML = "Lees minder";
    moreText.style.display = "inline";
  }
}

#more {
  display: none;
}

Answer 4

В настоящее время вы используете одни и те же id несколько раз для своих элементов. Быстрое и простое решение - заменить их на class es. Я также рекомендовал бы добавить общий класс к родительскому div и изменить имена классов на что-то более семантичное c. Вот мое предложение:

<div class="movie" id="spiderman">
    <h2>Spider-man: Homecomming.</h2>
    <p>Spider-Man: Homecoming is a 2017 American superhero film based on the Marvel Comics character Spider-Man, co-produced by Columbia Pictures and Marvel Studios, and distributed by Sony Pictures Releasing. It is the second Spider-Man film reboot and the
    sixteenth film in the Marvel Cinematic Universe (MCU).
      <span class="dots">...</span><span class="more">The film is directed by Jon Watts, from a screenplay by the writing teams of Jonathan Goldstein and John Francis Daley, Watts and Christopher Ford, and Chris McKenna and Erik Sommers. Tom Holland stars as Peter Parker / Spider-Man, alongside Michael Keaton, Jon Favreau, Zendaya, Donald Glover, Tyne Daly, Marisa Tomei, and Robert Downey Jr. In Spider-Man: Homecoming, Peter Parker tries to balance high school life ywith being Spider-Man .</span></p>
    <button onclick="myFunction()" class="showMoreButton">Lees meer</button>
    <img class="preview" src="img/spidermanfilm.jpg">
</div>

Ради разделения интересов (или здесь, разделения HTML, CSS и JavaScript), давайте также избавимся от атрибута onclick на button s:

<button class="showMoreButton">Lees meer</button>

Следующим шагом является соответствующая адаптация вашего JavaScript. Во-первых, теперь нужно найти элементы по имени class вместо id. Простой и современный способ сделать это - использовать querySelectorAll(), который позволяет вам захватить все элементы, которые соответствуют данному селектору CSS. А пока давайте просто возьмем кнопки:

let buttons = document.querySelectorAll(".showMoreButton");

Поскольку мы удалили атрибут onclick, теперь мы будем использовать addEventListener(), чтобы назначить функцию обработчика события каждому кнопка:

for (let button of buttons) {
    button.addEventHandler("click", onShowMoreHandler);
}

Функция onShowMoreHandler() теперь будет вызываться при нажатии одной из кнопок. Функции обработчика событий получат объект event, который содержит ссылку на элемент, вызвавший событие. Оттуда мы можем продвигаться вверх по DOM, используя parentNode, чтобы найти div, который затем позволит нам найти и манипулировать соответствующими span s:

function onShowMoreHandler(event) {
    let button = event.target;
    let movie = button.parentNode;
    let dots = movie.querySelector(".dots");
    let more = movie.querySelector(".more");

    // Now do the magic!
}

Я думаю, вы можете взять это отсюда. Не забудьте добавить обработку ошибок, например, если одна из querySelector*() функций не может найти искомые элементы.