JavaScript

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

将 ul 传递给您的函数：

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

Answer 2

您不必手动传递 id，只需传递 this to the function to refer the current element inside the function. Then use 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 3

id 属性必须是唯一的，如果您想使用通用标识符，您应该使用 classes
不鼓励使用内联 JavaScript 和事件属性，相反，您应该 select 您希望使用 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>

JavaScript - 点击时显示更多信息

JavaScript - Show more info on click

dom

show

hide