按钮按下并使用foreach循环将按钮更改为其他按钮Mongoose javascript

f0brbegy  于 2022-11-13  发布在  Go
关注(0)|答案(1)|浏览(142)

我想按下编辑按钮,将其更改为保存按钮,删除按钮已变为取消。当您按下按钮时,文本必须变为文本区域,以便您可以在数据库中更改它。
这是前端。知道它只改变按钮的文本

<% itemsSmall.forEach(function(itemsSmall, index) {%>
            <%if( String(image._id) === String(itemsSmall.imageId)){
              %>
              <div class="position-relative">
              <div>
                <p class="d-inline-block"><strong><%= itemsSmall.title %>:</strong> <%=itemsSmall.smallInformation %>              </p>
              </div>
              <div style="display: none;" id="Test<%=String(itemsSmall.imageId)%>">
                change text
                </div>

                <% if(image.userId == user.userId || user.admin > 2){ %>
                  <div class="col-12 col-md-6">
                  <button onclick="quoteAdd('{!!$product->id!!}', this)" id="inquireButton" class="btn btn-sm btn-warning float-right me-md-2">edit</button>
              </div>

              <div class="col-12 col-md-6">
                <form action="/view/deleteSmall/<%= itemsSmall._id %>?_method=delete" method="POST">
                  <textarea name="imageId" id="imageId" hidden><%= image._id %></textarea>
                  <button  class="btn btn-sm btn-danger float-right me-md-2" type="submit">delete</button>
                </form>
                <%}%>
                </div>
              </div>
          <%}%>           
          <% }) %> 
        </div>

下面是按钮的javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     

<script>

  $(document).ready(function(){
      $('#myselection').on('change', function(){
        var demovalue = $(this).val(); 
          $("div.myDiv").hide();
          $("#show"+demovalue).show();
      });
  });

function quoteAdd(productId, button) {
  $(button).text('save');

}
  </script>

最后是后端

//create the small information blocks
router.post("/uploadSmall", (req, res) => {
  const id = req.params.id; //set the id from the page
  //create the image
  itemsSmall
    .findById(id)
    .then((result) => {
      //set the image in een obj
      var obj = {
        title: req.body.Title,
        smallInformation: req.body.smallInformation,
        userId: req.auth.userId,
        imageId: req.body.imageId,
      };
      //all the thing of the obj set to the model
      itemsSmall.create(obj, (err, items) => {
        if (err) {
          console.log(err);
        } else {
          items.save(); //upload the model
          res.redirect("/view/" + req.body.imageId);
        }
      });
    })
    .catch((err) => {
      console.log(err);
    });
});

router.post("/deleteSmall/:id", (req, res) => {
  const id = req.params.id; //get the id of the text
  //find the model in the database and delete it
  itemsSmall.findByIdAndRemove(id, (err) => {
    if (err) {
      console.log(err);
      return res.json({ success: false });
    }
    res.redirect("/view/" + req.body.imageId);
  });
});
c86crjj0

c86crjj01#

我找到了一个答案,你必须用按钮传递一个值,然后改变它。下面是代码
这是html

<% itemsSmall.forEach(function(itemsSmall, index) {%>
            <%if( String(image._id) === String(itemsSmall.imageId)){
              %>
              <div class="position-relative">
              <div>
                <p class="d-inline-block"><strong><%= itemsSmall.title %>:</strong> <%=itemsSmall.smallInformation %>              </p>
              </div>
              <div style="display: none;" id="<%=itemsSmall._id%>">
                your daddy
                </div>

                <% if(image.userId == user.userId || user.admin > 2){ %>
                  <div class="col-12 col-md-6">
                  <button onclick="quoteAdd('<%= itemsSmall._id %>', '{!!$product->id!!}', this)" value="<%= itemsSmall._id %>" id="inquireButton" class="btn btn-sm btn-warning float-right me-md-2">edit</button>
              </div>

              <div class="col-12 col-md-6">
                <form action="/view/deleteSmall/<%= itemsSmall._id %>?_method=delete" method="POST">
                  <textarea name="imageId" id="imageId" hidden><%= image._id %></textarea>
                  <button  class="btn btn-sm btn-danger float-right me-md-2" type="submit">delete</button>
                </form>
                <%}%>
                </div>
              </div>
          <%}%>           
          <% }) %>

下面是javascript部分

function quoteAdd(val, productId, button) {
  var x = document.getElementById(val)
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
    $(button).text(val);

}

我不认为这是最好的方法,但它很有效

相关问题