获取节点js中数组元素的位置

问题描述 投票：0回答：1

我已经从firebase检索了一个对象列表到我的ejs文件中：我正在以这种方式检索它们：

                                  <form id="eventform" method="post" action="/dasha">
                                    <%Object.keys(notes).forEach(function(key){%>
                                <tbody id="event" name="event">

                                    <tr>
                                       <td>1</td>

                                    <input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">

                                    <td id="evname" name="evname"><%=notes[key].event %></td>
                                    </form>
                                    <td><%=notes[key].location %></td>
                                    <td><%=notes[key].codes %></td>
                                    <td><%=notes[key].date %></td>
                                    </tr>
                                    <% }) %>

                                </tbody>

然而，我正在尝试实现Onclick，以便在单击某个项目时将其信息带到下一页：我已尝试将其存储在输入字段中，如：

**<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">**

但是，当我检查值时，我只能得到它拉出整个数组的单个项目。任何帮助这里是示例dataenter image description here

enter image description here

然后我使用jquery提交：

$(document).ready(function () {
$("#event").click(function(){
    var en = $("#evname").val();
    $("#categ").val(en);
    $("#eventform").submit();
    });
});

这是渲染的htmlsource和images /：

<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
                                          <%Object.keys(notes).forEach(function(key,idx){%>
                                            <tr>
                                               <td id="tid" name="tid" class="tid" ><%= idx %></td>

                                           <form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
                                <input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
                                <input type="hidden" id="idd" name="idd" class="idd" value="<%= idx %>">
 </form>
                                <td id="evname-<%= idx %>"  name="evname-<%= idx %>"><%=notes[key].event %></td> 
                                            <td id="elocation" name="elocation"><%=notes[key].location %></td>
                                            <td id="ecodes" name="ecodes"><%=notes[key].code %></td>
                                            <td id="edate" name="edate"><%=notes[key].date %></td>
                                            </tr>

                                            <% }) %>

                                        </tbody>

enter image description here

这是来自浏览器的渲染html：

<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">

                                        <tr>
                                           <td id="tid" name="tid" class="tid">0</td>

                                       <form name="eventForm-0" class="eventForm" method="post" action="/dasha"></form>
                            <input type="hidden" id="categ-0" name="categ" class="categ" value="zuri.png">
                            <input type="hidden" id="idd" name="idd" class="idd" value="0">

                            <td id="evname-0" name="evname-0">zuri.png</td> 
                                        <td id="elocation" name="elocation">zuri.png</td>
                                        <td id="ecodes" name="ecodes"></td>
                                        <td id="edate" name="edate">-LZfAvzWGudUK78TGtT_</td>
                                        </tr>


                                        <tr>
                                           <td id="tid" name="tid" class="tid">1</td>

                                       <form name="eventForm-1" class="eventForm" method="post" action="/dasha"></form>
                            <input type="hidden" id="categ-1" name="categ" class="categ" value="Africa Tourism Technology and Innovation Awards">
                            <input type="hidden" id="idd" name="idd" class="idd" value="1">

                            <td id="evname-1" name="evname-1">Africa Tourism Technology and Innovation Awards</td> 
                                        <td id="elocation" name="elocation">USIU – Africa</td>
                                        <td id="ecodes" name="ecodes">AA24VI</td>
                                        <td id="edate" name="edate">25th – 26th April, 2019</td>
                                        </tr>


                                        <tr>
                                           <td id="tid" name="tid" class="tid">2</td>

                                       <form name="eventForm-2" class="eventForm" method="post" action="/dasha"></form>
                            <input type="hidden" id="categ-2" name="categ" class="categ" value="2nd Annual Global M I C E Summit">
                            <input type="hidden" id="idd" name="idd" class="idd" value="2">

                            <td id="evname-2" name="evname-2">2nd Annual Global M I C E Summit</td> 
                                        <td id="elocation" name="elocation">Trademark Hotel</td>
                                        <td id="ecodes" name="ecodes">RT79XV</td>
                                        <td id="edate" name="edate">11th – 13th September, 2019</td>
                                        </tr>



                                    </tbody>
node.js
1个回答
1
投票

你的代码有很多问题，尽管试图在评论中强调它们没有足够的空间，因此这个“不完整”的答案

对于初学者，你在form循环之前打开一个forEach标签。然后在第一个循环中关闭它。因此，在您后续的迭代中，没有可以找到的表单。

其次，您在循环期间重用了相同的ID，这是您不应该执行的，因为如果您有多个正在循环的对象，它将生成具有相同ID的多个项目。如果您有2个ID为'foo'的元素，则使用多个相同ID会导致意外后果，每个ID都应该是唯一的。

第三，你的<table>周围没有tbody标签，因此一些浏览器剥离了tbody，所以你点击事件永远不会开火。你的行也在<tr>元素中，所以你应该将你的点击处理程序附加到它。

                         <form id="eventform" method="post" action="/dasha">
                            <%Object.keys(notes).forEach(function(key){%>
                        <tbody id="event" name="event">

                            <tr>
                               <td>1</td>

                            <input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">

                            <td id="evname" name="evname"><%=notes[key].event %></td>
                            </form> // YOU'RE CLOSING YOUR FORM HERE INSIDE THE LOOP ITERATION
                            <td><%=notes[key].location %></td>
                            <td><%=notes[key].codes %></td>
                            <td><%=notes[key].date %></td>
                            </tr>
                            <% }) %>

                        </tbody>

现在这个没有经过测试，因为我不知道你的页面的完整布局，它在黑暗中有点刺，但你可以尝试类似下面的东西，看看你有没有运气

                                <%Object.keys(notes).forEach(function(key,idx){%>
                           <table>
                            <tbody id="event-<%= idx =>" name="event" class="eventName">

                                <tr class="row">
                                   <td>1</td>
                                 <form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
                                <input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
 </form>
                                <td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td> 
                                <td><%=notes[key].location %></td>
                                <td><%=notes[key].codes %></td>
                                <td><%=notes[key].date %></td>
                                </tr>
                                <% }) %>

                            </tbody>
                           </table>

和一个类似的点击处理程序

$(document).ready(function () {
$(".row").click(function(ev){
    let form = ev.currentTarget.querySelector('form');
    form.submit()
});

使用vanilla JS的更简单版本可以在这里找到https://jsfiddle.net/xvag0mj2/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.