Question

我已经从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 %>">**

但是我只是无法获取单个项目，因此当我检查值时它将拉整个数组。任何帮助这是示例数据

然后我使用jquery提交：

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

这是渲染的htmlsource和图像/：

<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>

这是浏览器呈现的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>

Answer 1

您的代码有很多问题，尽管试图在注释中突出显示它们，但空间不足，因此答案“不完整”

对于初学者来说，您需要在form循环之前打开forEach标记。然后，在第一个循环中将其关闭。因此，在您的后续迭代中，找不到要查找的表单。

第二，您在循环期间重复使用了相同的ID，因此不应该这样做，因为如果您要遍历多个对象，它将生成具有相同ID的多个项目。如果您有两个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()
});

在这里https://jsfiddle.net/xvag0mj2/

可以找到使用香草JS的简单版本。

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

1 个答案: