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

您不必手动传递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

将ul传递给您的函数：

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

Answer 3

1. id属性必须是唯一的，如果要使用公共标识符，则应使用classes
2. 不鼓励使用内联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>