我有一個表單數組,每個表單都有成功消息。我想只在單擊的窗體上顯示成功消息。但是,無論何時單擊某個表單時,都會顯示所有表單上的成功消息。原諒我的問題,因爲我是一個JavaScript和jQuery的初學者。我怎樣才能做到這一點?這裏是我的html代碼...如何使用jquery顯示div的單個實例? (AJAX,jQuery)
<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">₱
${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();
}
});
});
});
我不明白爲什麼$(this).find('。success-message')。show()不起作用。不管怎樣,謝謝! – saluyotamazing