如何使用jQuery显示DIV的一个实例?(Ajax，jQuery)

Question

我有一系列形式，每个表单上都有成功消息。我想在仅点击的表单上显示成功消息。但是，每当我单击单个表单时，所有表格上的成功消息都会显示。请原谅我的问题，因为我是JavaScript和jQuery的初学者。我该如何实现？这是我的HTML代码...

<c:forEach items="${inventories}" var="inventory" varStatus="varStatus">
    <div class="col-xs-6 col-sm-3" style="padding: 2%;">
        <div class="card">
            <img class="card-img-top"
                src="${pageContext.request.contextPath}/image?prodId=${inventory.getProduct().getProductId()}"
                alt="Card image cap"
                style="height: 200px; width: 100% px; display: block; margin: auto;">
            <form:form id="add_to_cart_form" action="addToCart" method="POST"
                modelAttribute="cartProduct">
                <form:input type="hidden" path="user.email"
                    value="${user.getEmail()}" />
                <form:input type="hidden" path="product.productId"
                    value="${inventory.getProduct().getProductId()}" />
                <div class="card-block" style="overflow: hidden; padding: 2%">
                    <h5 style="white-space: nowrap">
                        <a href="#" class="text-primary card-title">${inventory.getProduct().getName()}</a>
                    </h5>
                    <p class="card-text text-danger">&#8369;
                        ${inventory.getProduct().getPrice()}</p>
                    <p class="text-success">In stock</p>
                    <p>
                        <div class="success-message" style="display: none;"><span class="text-success add-to-cart"><strong>Added
                                to cart!</strong></span></div>
                    </p>
                    <form:button class="btn btn-block btn-warning">Add to cart</form:button>
                </div>
            </form:form>
        </div>
    </div>
</c:forEach>

这是我的ajax代码...

$(document).ready(function() {
    var form = $("form");
    var url = form.attr("action");
    var formMethod = form.attr("method");
    form.submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : url,
            data : $(this).serialize(),
            type : "POST",
            success : function(cartProduct) {
                $('.success-message').show();
            }
        });
    });
});

Answer 1

尝试存储在变量中提交的表单的引用，然后以单击的形式找到成功消息。

参考代码：

$(document).ready(function() {
  var form = $("form");
  var url = form.attr("action");
  var formMethod = form.attr("method");
  form.submit(function(event) {
    var that = this;   //store reference of form submitted in variable
    event.preventDefault();
    $.ajax({
      url: url,
      data: $(this).serialize(),
      type: "POST",
      success: function(cartProduct) {
        $(that).find('.success-message').show(); //find the success-message in the form that was clicked and show it
      }
    });
  });
});

Answer 2

您可以使用jQuery的.find()方法来隔离success-message的实例，该实例位于提交的表单中：

替换

$('.success-message').show();

$(this).find('.success-message').show();

在这种情况下，this应表示提交的表格。

有关.find()方法如何工作的更详细说明。

Answer 3

您需要找到提交的当前表格的成功消息。

  $(document).ready(function() {
    // for each form
     $("form").each(function() {
        // current form which might be submitted
        var _this = this;
        _this.on('submit', function(event){
         // on current form submit
         event.preventDefault();
         //send ajax 
         $.ajax({
            url : form.attr("action"),
            data : $(this).serialize(),
            type : form.attr("method"),
            success : function(cartProduct) {
              //on success get success message of this submitted form   
             _this.find('.success-message').show();
            }
         });
       });
    }); 
   });