目前，我正在使用 jQuery Form 插件来处理 Magento 产品列表中的多个 AJAX 表单.ajaxForm({});。现在，我使用的解决方案有效，但它非常笨重，很想知道是否有更好的方法来解决这个问题。
为简洁起见，我将稍微缩短我的代码：
<?php foreach ($_productCollection as $_product): ?>
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" class="derp" id="derp-<?php echo $_iterator; ?>">
<div class="quanitybox">
<label for="qty"><?php echo $this->__('Quantity:') ?></label>
<input type="button" class="quantity_box_button_down" />
<input type="text" name="qty" maxlength="12" value="1" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
<input type="button" class="quantity_box_button_up" />
</div>
<button type="submit" title="Add to Cart" class="button btn-cart" ><span><span>Add to Cart</span></span></button>
</form>
<script type="text/javascript">
var productAddToCartForm = new VarienForm('derp-<?php echo $_iterator ?>');
jQuery('#derp-<?php echo $_iterator ?>').ajaxForm({
url: jQuery('#derp-<?php echo $_iterator ?>').attr('action').replace("checkout/cart","ajax/index"),
data: {'isAjax':1},
dataType: 'json',
beforeSubmit: function(){
if(productAddToCartForm.validator.validate()){
windowOver.show();
windowBox.show().css({
backgroundImage: "url('<?php echo $this->getSkinUrl('images/loading.gif')?>')"
});
}else{
return false;
}
},
error: function(data){
windowBox.css({
backgroundImage: 'none'
}).html('<?php echo $this->__('Error') ?>');
windowOver.one('click',function(){
hidewindow(windowBox,windowOver);
});
jQuery('#hidewindow').click(function(){
hidewindow(windowBox,windowOver);
});
},
success : function(data,statusText,xhr ){
if(data.status == 'SUCCESS'){
if(jQuery('.block-cart')){
jQuery('.block-cart').replaceWith(data.sidebar);
}
if(jQuery('.header .block-cart-header')){
jQuery('.header .block-cart-header').replaceWith(data.topcart);
}
msgHtml = '<div class="added-content"><div style="float:left;">' + productImg + '</div><em>' + titleForBox<?php echo $_iterator ?> + '</em> <?php echo $this->__('was successfully added to your shopping cart.') ?><div style="clear:both;"></div><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';
}else{
msgHtml = '<div class="added-content"><p class="error-msg" style="margin-bottom:15px;">' + data.message + '</p><a id="hidewindow" href="javascript:void(0);"><?php echo $this->__('Continue shopping') ?></a> <a href="<?php echo $this->getUrl('checkout/cart')?>"><?php echo $this->__('View cart & checkout') ?></a></div>';
}
windowBox.css({
backgroundImage: 'none'
}).html(msgHtml);
windowOver.one('click',function(){
hidewindow(windowBox,windowOver);
});
jQuery('#hidewindow').click(function(){
hidewindow(windowBox,windowOver);
});
}
});
</script>
<?php endforeach; ?>
这段代码的不幸部分是我在每个产品的底部生成了一堆重复的 JavaScript。
我真的没有看到解决这个问题的方法，因为我需要new VarienForm()为每个产品生成一个验证，它只需要一个表单 ID（除非我弄错了）。
我正在使用内置的 执行此操作$_iterator，每个foreach()循环递增（即：derp-1、derp-2、derp-3），并为每个表单添加递增的 id。
我知道我可以使用类选择器来定位每个表单，例如jQuery('.derp').ajaxForm({});但是我仍然需要能够将其与VarienForm.
我试图ajaxForm({});根据提交按钮即时生成，.each( function({ jQuery(this).on('click', function({ //AJAX STUFF HERE }) ); }) );但这没有用。
是否有更强大的解决方案可以独立针对每个表单，生成一个VarienForm，获取我需要的任何表单数据，利用该ajaxForm({})方法并将它们保持在一起？