无法迭代到隐藏值字段答案

【问题标题】：Unable to iterate into hidden value field无法迭代到隐藏值字段
【发布时间】：2019-08-14 19:04:22
【问题描述】：

我正在使用 Pug 模板引擎并尝试将用户数组迭代为具有隐藏输入值的表单。当尝试通过 document.getElementById('custId').value 检索值时 - 我只能成功 console.log 第一个值，第二个和其他值甚至没有出现在控制台中。

迭代对标签工作正常。我可以控制台记录所有值。

a(href=`/approve-user/${user._id}`) by viewroute

但有隐藏输入

input(type="hidden" id="custId" name="custId" value=`${user._id}`)       
button.btn.btn-primary#approve-btn #{user._id}

我只能控制台记录 user._id 的第一个隐藏值。

PUG 文件：

block content
    .container
        h1= title      
        .content
        table.table
            thead.thead-light
                tr
                    th(scope="col") Name
                    th(scope="col") Email
                    th(scope="col") Tier
                    th(scope="col") Approve via viewRoute
                    th(scope="col") Approve via Axios
            tbody
            each user in users
                tr
                    td= user.name
                    td= user.email
                    td= user._id       
                    td 
                        a(href=`/approve-user/${user._id}`) by viewroute
                    td 
                        form#approve
                            input(type="hidden" id="custId" name="custId" value=`${user._id}`)       
                            button.btn.btn-primary#approve-btn #{user._id}
                    tr

        p.text-warning.text-center= msg

JS 文件：

const approveSellerTest = () => {
    let id = document.getElementById('custId').value;
    console.log('From approveSellerTest, hidden value: ', id);     
};

const approveBtn = document.querySelector('#approve');
if (approveBtn) {

    approveBtn.addEventListener('click', e => {
        e.preventDefault();
        approveSellerTest();
    });
};

请参阅附加的输出屏幕。

Screenshot of output

如果我单击第一个蓝色按钮，console.log 会在控制台上显示第一个 user._id。但是，如果我单击第二个或第三个蓝色按钮，控制台将不显示任何内容，甚至未定义。

预期结果：单击第二个蓝色按钮应在控制台中显示 5d544fa7578a7e23eb268b2b 的 user._id 并单击第三个蓝色按钮，应在控制台中显示 5d5457eb27dff0257c016ace 的 user._id

【问题讨论】：

id 在页面上必须是唯一的
和 document.querySelector('#approve'); 仅返回此选择器的第一个元素

标签： javascript pug

【解决方案1】：

我认为这里有两个问题：

1) 每个 id 属性的值在文档中必须是唯一的。

最好在表单中使用submit 而不是button

td 
  form(data-id="approve")
    input(type="hidden" id="custId-${user._id}" name="custId" value=`${user._id}`)       
    submit.btn.btn-primary #{user._id}

2) document.querySelector('#approve') 这个选择器只返回第一个元素，需要使用document.querySelectorAll:

const approveForms = document.querySelectorAll('[data-id="approve"]');

if (approveForms && approveForms.length) {
  Array.prototype.forEach.call(approveBtns, function(form) {
    form.addEventListener('submit', e => {
        approveSellerTest();
        e.preventDefault();
    });
  });
};

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

在这里我回答了为什么需要对从querySelectorAll 方法获得的元素使用Array.prototype.forEach.call

Array.prototype.filter.call(forms, function(form) What is this doing?

【讨论】：

【解决方案2】：

可以添加生成的 DOM 吗？
可能有多个表单和使用相同 id 输入（#approve 和 #custId）的问题。那么你的 JS 可能只在第一个 Form 上初始化。

尝试使用唯一的 id，然后您的 JS 必须定义您的 approveSellerTest 事件处理程序以处理 any 表单。您可以使用 CSS 类而不是 id。

（这里不是哈巴狗用户）

【讨论】：