如何使用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()方法如何工作的更详细说明，请参阅https://api.jquery.com/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(); 
      } 
     }); 
     }); 
    }); 
    });