Javascript Показать / скрыть несколько экземпляров на странице - не удается изменить идентификатор

#javascript #show-hide

#javascript #показать-скрыть

Вопрос:

У меня есть JS с элементом Show / Hide на странице, который написан так, чтобы конечные пользователи в моей организации могли добавлять новый контент (несколько интервью), не зная html / js, поэтому идентификатор нельзя изменять для каждого экземпляра. Если завершающий скрипт можно использовать с добавленной переменной, позволяющей изменять идентификационный номер ( 1) для каждого экземпляра, это было бы идеально, однако, новое решение также приветствуется.

 function showMoreOrLess(thisObj, bonusContent) {
  var caption = thisObj.innerHTML;
  //alert(caption);
  if (caption == "Read more") {
    document.getElementById(bonusContent).style.display = "inline";
    thisObj.innerHTML = "Read less";
  } else {
    document.getElementById(bonusContent).style.display = "none";
    thisObj.innerHTML = "Read more";
  }
}

 <p>lots of intro text here</p>
<span id="1" style="display:none">
        <p>Lorem Ipsum is ...</p>
    </span>
<p><a onclick="showMoreOrLess(this,'1');">Read more</a></p>

1. В id ‘s вообще нет необходимости. Просто ссылайтесь на элементы, которые вам нужны, используя относительные свойства DOM.

2. Как будет выглядеть код, если я удалю идентификатор?

Ответ №1:

Если интервал, который вы хотите скрыть или показать, всегда находится прямо перед абзацем, содержащим ссылку, вы можете использовать свойства навигации DOM.

 function showMoreOrLess(thisObj) {
  var caption = thisObj.innerHTML;
  var otherObj = thisObj.parentElement.previousElementSibling;
  if (caption == "Read more") {
    otherObj.style.display = "inline";
    thisObj.innerHTML = "Read less";
  } else {
    otherObj.style.display = "none";
    thisObj.innerHTML = "Read more";
  }
}

 <p>lots of intro text here</p>
<span id style="display:none">
        <p>Lorem Ipsum is ...</p>
    </span>
<p><a onclick="showMoreOrLess(this);">Read more</a></p>

<p>Different intro text here</p>
<span style="display:none">
        <p>Blah Blah Blah ...</p>
    </span>
<p><a onclick="showMoreOrLess(this);">Read more</a></p>