Javascript获取html代码中项目列表中一项的值[关闭]

Question

我有一个项目列表，其中的输入是隐藏的，但都包含不同的值， 我如何从每个 li 中获取价值

<ul class="happiness">
 <li><input type="hidden" value="guid-xxxx0"/> Happy </li>
 <li><input type="hidden" value="guid-xxxx1"/> Sad </li>
 <li><input type="hidden" value="guid-xxxx2"/> I dont know </li>
</ul>

这是正确的做法吗？

$(".happiness").click(function(){
 var value = $(this).find("li input").val();
});

Answer 1

将点击事件绑定到li 以使用元素包含的值更新#displayer 内容。我假设实际上<li> 会有更多的内容。

例如：

Array.prototype.forEach.call(document.querySelectorAll('li'), function (elem) {
    elem.addEventListener('click', function () {
        document.getElementById('displayer').textContent =
            this.querySelector('input').value;
    });
});

This works，但它确实做了一些假设，例如每个 li 只有一个 input 后代。