如何将文本/按钮添加到一个可折叠列表的所有标题/正文？

Posted 2023-05-07

【中文标题】如何将文本/按钮添加到一个可折叠列表的所有标题/正文？

【英文标题】：How to add text/button to all header's/body's of one Collapsible-List?

【发布时间】：2021-11-15 09:06:23

【问题描述】：

我有 2 个可折叠列表和 2 个按钮，如果我单击第一个按钮，我希望第一个列表中的所有标题都会获得一个新文本（例如“你好，我的名字是 Max”），如果我单击第二个按钮按钮，它应该向第二个列表的所有主体添加一个新按钮。

我正在寻找 javascript 中的解决方案（也可以使用 jQuery）。问题是我对这一切都是新手，不知道如何解决这个任务。感谢您的每一次帮助。

我的代码：

<ul class="collapsible" id="1">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

 <ul class="collapsible" id="2">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
<button class="btn yellow" id="collapsible-header-green">Change text of all headers ul(id="1")</button>
<button class="btn yellow" id="collapsible-body-green"> Add buttons to all body's ul(id="2")</button>

【参考方案1】：

const list1 = document.getElementById("1"); => 获取第一个列表 const button1 = document.getElementById("collapsible-header-green"); => 获得第一个按钮 常量元素 = list1.getElementsByClassName("collapsible-header"); => 获取 list1 中的所有 collapsible-header 给button1添加onClick事件，当点击事件触发时，改变元素的文字

代码如下：

// change text in first list when click first button
const list1 = document.getElementById("1");
const button1 = document.getElementById("collapsible-header-green");
button1.onclick = function () 
  const elements = list1.getElementsByClassName("collapsible-header");
  for (let element of elements) 
    element.innerhtml = "new text";
  
;

// add button in second list when click second button
const list2 = document.getElementById("2");
const button2 = document.getElementById("collapsible-body-green");
button2.onclick = function () 
  const elements = list2.getElementsByClassName("collapsible-body");
  for (let element of elements) 
    const newButton = document.createElement("button");
    newButton.innerHTML = "new button";
    element.appendChild(newButton);
  
;

<ul class="collapsible" id="1">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

 <ul class="collapsible" id="2">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
<button class="btn yellow" id="collapsible-header-green">Change text of all headers ul(id="1")</button>
<button class="btn yellow" id="collapsible-body-green"> Add buttons to all body's ul(id="2")</button>