javascript - 如何遍历 div 中的 ul 元素并在提交时单独隐藏它们？

Question

在我使用 express 的 Node 应用程序中，我有一个创建非事件公司列表的 View 函数，每个公司都有两个提交输入类型“事件”和“删除”。我希望能够点击提交并隐藏该个人 ul。但是，我不太确定如何单独迭代。每次我尝试时，我最终都会隐藏所有元素。这是我的 View 函数:

function inactiveFiltered(companyObject) {
    return `
        <ul class="companyinfo">
            <li class="list-info">${companyObject.company_type}</li>
            <li class="list-info">${companyObject.company_name}</li>
            <li class="list-info">${companyObject.company_location}</li>
            <li class="list-info">${companyObject.company_phone}</li>
            <br>
            <li class="list-buttons">
                <form action="/activeList" method="POST" class="myform">
                    <input type="hidden" name="companyId" value="${companyObject.id}">
                    <input type="submit" value="Active">
                </form>
                <form action="/deletecompany" method="POST">
                    <input type="hidden" name="companyId" value="${companyObject.id}">
                    <input type="submit" value="Delete">
                </form>
            </li>
            <br>
        </ul>
    `
}

function inactiveList(arrayOfCompanies){
    const companyItems = arrayOfCompanies.map(inactiveFiltered).join('');

    return `
        <div class="list inactive-list">
            ${companyItems}
        </div>
    `
}

module.exports = inactiveList;

一个函数接受一组公司，然后创建一个公司对象。现在这是最新的 JQuery 尝试，但正如我所说，它隐藏了所有 ul 元素:

                $(document.body).submit(function() {
                    $('.companyinfo').each(function(i) {
                        $(this).hide();
                    })
                })

我已经坚持这个太久了，希望得到任何帮助。谢谢!

Answer 1

您同时隐藏了所有元素，因为选择器 .companyinfo使用类 companyinfo 返回所有元素的列表这些都是你的情况下的公司。这就是为什么它们同时被隐藏起来的原因

实现目标的一种方法是将 id 添加到 ul能够为每个公司单独解决这些问题的元素，如下所示:<ul id="companyinfo_${companyObject.company_name}" class="companyinfo"> .

然后添加一个方法hideCompany()替换 $(document.body).submit(function()部分:

function hideCompany(companyname) {
    $('#companyinfo_' + companyname).hide();
}

最后修改<input type="submit" value="Delete">阅读<input type="submit" value="Delete" onclick="hideCompany('${companyObject.company_name}')"> .