你也许注意到了Magento的数量输入只是普通的输入框,当你想要修改它的值时必须先手动删除现有值,然后输入新的值。今天我将展示添加加号和减号来修改数量。感兴趣的话就继续往下阅读吧。 这是一项非常简单的工作,但又与Magento中的其它东西不一样,它需要些时间(我花了2小时测试)。我所做的就是创建一个连接JavaScript的插件。我动态地创建了div元素并用包含“+”和“-”号的段落标签来填充。 负责执行的代码是这样的: var parentTD; var newDiv; var navigationDiv; var i = 1; var currentElement = null; $$('input.qty').each(function(el){ parentTD = el.parentNode; newDiv = document.createElement('div'); Element.extend(newDiv); newDiv.id = i++; newDiv.update(parentTD.innerHTML).innerHTML; //set new input inside new div parentTD.update().innerHTML; //erase old input parentTD.appendChild(newDiv); //show new div navigationDiv = document.createElement('div'); Element.extend(navigationDiv); navigationDiv.update('<p class="up">+</p><p class="dn">-</p>').innerHTML; newDiv.appendChild(navigationDiv); }); $$('p.up').each(function(el){ el.observe('click',function(event){ currentElement = el.parentNode.previous(); i = 0; //In case we get in to infinite loop while(currentElement.type != 'text' && i < 5){ currentElement = currentElement.previous(); i++; } currentElement.value = parseInt(currentElement.value) + 1; }); }); $$('p.dn').each(function(el){ el.observe('click',function(event){ currentElement = el.parentNode.previous(); i = 0; //In case we get in to infinite loop while(currentElement.type != 'text' && i < 5){ currentElement = currentElement.previous(); i++; } if(parseInt(currentElement.value) > 0){ currentElement.value = parseInt(currentElement.value) - 1; } }); }); 为安全起见,请先做好备份。执行之后是没有样式的,但是你可以随时添加一些CSS样式。生成的HTML结构大概是这样的: <div id="1"> <label for="qty"> Qty: </label> <input name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" type="text"> <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"> <span> <span> Add to Cart </span> </span> </button> <div> <p class="up"> + </p> <p class="dn"> - </p> </div> </div>(责任编辑:好模板) |