javascript - 我的 html 中的第一个按钮不请求发布，但其他按钮工作正常

Question

This is the webpage i have been working on..

这里我有多个从 ejs for 循环中获得的按钮(编辑按钮、删除按钮)。删除效果很好。但是当我单击编辑时，第一个编辑按钮不会发送发布请求，但其他按钮会发送。我不明白为什么......以下是服务器端代码，

  app.post('/todo/edit/:todoId',function(req,res){
    //console.log(req.params.todoId);
    //res.json({url:'todo-edit'});
    res.render('todo-edit',{cat:req.params.todoId});
    console.log('dog');
  });

          <form>
            <% for(var i=0;i<todos.length;i++){ %>
              <% if(todos[i].done){ %>
                <li id="strike"><%= todos[i].item %></li><form action="/todo/edit/<%= todos[i]._id %>" method="post"><button type="submit" class="btn1 <%= todos[i]._id %>">-</button><button id=<%= todos[i]._id %> class="btn2">X</button></form>
              <% }else{ %>
                <li id="nonStrike"><%= todos[i].item %></li><form action="/todo/edit/<%= todos[i]._id %>" method="post"><button type="submit" class="btn1 <%= todos[i]._id %>">-</button><button id=<%= todos[i]._id %> class="btn2">X</button></form>
              <% } %>
            <% } %>
        </form>

Answer 1

好的，首先，对于这里试图解决这个问题的其他人来说。这是更易读格式的代码

      <form>
        <% for(var i=0;i<todos.length;i++){ %>
          <% if(todos[i].done){ %>
            <li id="strike"><%= todos[i].item %></li>
            <form action="/todo/edit/<%= todos[i]._id %>" method="post">
                <button type="submit" class="btn1 <%= todos[i]._id %>">-</button>
                <button id=<%= todos[i]._id %> class="btn2">X</button>
            </form>
            <% }else{ %>
                <li id="nonStrike"><%= todos[i].item %></li>
                <form action="/todo/edit/<%= todos[i]._id %>" method="post">
                    <button type="submit" class="btn1 <%= todos[i]._id %>">-</button>
                    <button id=<%= todos[i]._id %> class="btn2">X</button>
                </form>
              <% } %>
            <% } %>
    </form>

其次，

您的列表元素 (li) 未包含在 ul 或 ol 标记内，这是非常糟糕的做法。

最后，由于浏览器技术的限制，您需要查找如何执行“method_override”才能创建您的“删除”路线。这样您的操作最终看起来与此类似。

action="/blogs/<%= blog._id %>?_method=DELETE"

希望这能让您走上正确的道路。