Question

如何使按钮仅显示其自身div中的ul？如何为每个div添加唯一的ID，因为我有一个PHP代码会输出未知数量的div ...

 function myFunction() {
  var x = document.getElementById('table').firstElementChild;
  x.style.display = 'block';
 }

<div id="table">
  <ul style="display:none;">
    <li>Name</li>
    <li>Number</li>
    <li>Model</li> 
  </ul>
  <button onclick="myFunction()">More info</button>
</div>

<div id="table">
  <ul style="display:none;">
    <li>Name</li>
    <li>Number</li>
    <li>Model</li> 
  </ul>
  <button onclick="myFunction()">More info</button>
</div>

Answer 1

您不必手动传递id，只需将this传递给函数即可引用函数中的当前元素。然后使用previousElementSibling定位ul。请尝试以下操作：

function myFunction(el) {
   var x = el.previousElementSibling;
   x.style.display = 'block';
 }

<div id="table">
  <ul style="display:none;">
    <li>Name</li>
    <li>Number</li>
    <li>Model</li> 
  </ul>
  <button onclick="myFunction(this)">More info</button>
</div>

<div id="table">
  <ul style="display:none;">
    <li>Name</li>
    <li>Number</li>
    <li>Model</li> 
  </ul>
  <button onclick="myFunction(this)">More info</button>
</div>

Answer 2

id属性必须是唯一的，如果您想使用公共标识符，则应该使用class es
不建议使用内联JavaScript和事件属性，相反，您应该选择要使用JavaScript侦听的元素，或者使用委托的事件侦听器，如下所示。

const toggleInfo = ({ target, parent }) => {
    const hidden = +!!parent.firstElementChild.style.display;
    parent.firstElementChild.style.display = ['none', ''][+hidden];
    target.textContent = `${['More','Less'][+hidden]} info`;
}

document.addEventListener('click', ({ target, target: { parentNode: parent } }) => {
    if("BUTTON" === target.tagName && /table/.test(parent.className)) {
        toggleInfo({ target, parent });
    }
});

<div class="table">
  <ul style="display:none;">
    <li>Name</li>
    <li>Number</li>
    <li>Model</li> 
  </ul>
  <button>More info</button>
</div>

<div class="table">
  <ul style="display:none;">
    <li>Name</li>
    <li>Number</li>
    <li>Model</li> 
  </ul>
  <button>More info</button>
</div>

Answer 3

将ul传递给您的函数：

onclick="myFunction(this.parentNode.children[0])"

JavaScript-点击可显示更多信息

3 个答案: