Question

我正在尝试添加多个阅读更多链接。如您所见，禁止提供相同的ID且不起作用。您能否以其他方式帮助实现以下结果？我想在网站上的多个阻止文本上使用此功能...

document.getElementById("read_more").addEventListener( 'click' , changeClass);

function changeClass() {
    var content = document.getElementById("extra_content");
    var btn = document.getElementById("read_more");
    content.classList.toggle('show');
    
    if (content.classList.contains("show")) {
            btn.innerHTML = "Show Less";
        } else {
            btn.innerHTML = "Show More";
        }
}

@media (max-width: 650px) {
  .extra_content {
    display: none;
  }
  #read_more {
    display: block;
  }
}

.read_more  {
  display: none;
}

.show {
   display: block!important;
}

<div>
    <p>here is some content.</p>
    <p id="extra_content" class="extra_content">here is some extra content</p>
    <button id="read_more" class="read_more">Show More</button>
     <p>here is some content.</p>
    <p id="extra_content" class="extra_content">here is some extra content</p>
    <button id="read_more" class="read_more">Show More</button>
</div>

谢谢您的时间。

Answer 1

首先让我们解释一下为什么您不能对不同元素使用相同的标识符的原因。因此，请阅读下面的documentation状态：

id全局属性定义一个标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时识别元素。

因此，一种可能的解决方案是通过name或class属性来查找元素。并基于这些切换类。查找下面的示例：

const buttons = document.getElementsByClassName('read_more');

const onButtonClick = (event) => {
  const button = event.target;
  const dataTarget = button.getAttribute('data-target');
  const extraContent = document.getElementById(dataTarget);
  button.innerHTML = button.innerHTML === 'Show Less' ? 'Show More' : 'Show Less';
  extraContent.classList.toggle('show');
}

const attachingEvent = e => e.addEventListener('click', onButtonClick);

Array.prototype.forEach.call(buttons, attachingEvent);

.extra_content  {
  display: none;
}

.show {
   display: block !important;
}

<div>
    <p>here is some content.</p>
    <p id="firstTarget" class="extra_content">here is some extra content</p>
    <button class="read_more" data-target="firstTarget">Show More</button>
    <p>here is some content.</p>
    <p id="secondTarget" class="extra_content">here is some extra content</p>
    <button class="read_more" data-target="secondTarget">Show More</button>
</div>

我希望这会有所帮助！

使用JavaScript多次读取或多或少的链接

1 个答案: