作者:pengminglin1968 | 来源:互联网 | 2023-01-31 15:24
标题可能不是很清晰,我们看实例: 简单来说就是需要实现sku的功能。。。一件商品可以有多个属性,一个属性可以有多个值 。最后以json格式存到数据库 难点一:如何实现input输入框的弹性使用<divclass"formControlscol-xs-8col-sm-9"&a
标题可能不是很清晰,我们看实例:
简单来说就是需要实现sku的功能。。。一件商品可以有多个属性, 一个属性可以有多个值 。 最后以json格式存到数据库
难点一: 如何实现input输入框的弹性使用
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text sku_attribute_input" >
<a href="Javascript:void(0);" onclick="addinput(this)">+增加选项a>
div>
初始化是一个input,input下面有个a菜单,每次点击,触发jquery, 在a菜单之前增加一个input
难点二: 如何获取input的值
一个属性旁边都有一个复选框,我们用强大的jquery得到($('input:checkbox[class=check_sku_attribute]:checked'))所有勾选的复选框,
然后遍历它们,得到属性名($(this).parent().text()) 和 所有属性值集合($(this).parent().next().children())
考虑到,一个属性对应多个值 ,应该使用js对象来存储(之前使用数组,浪费了很多事件,原来js数组不能自定义索引)
$('input:checkbox[class=check_sku_attribute]:checked').each(function(){
var name = $(this).parent().text();
var sku = new Array();
//遍历字节点
$(this).parent().next().children().each(function(){
if($.trim($(this).val())!=''){
sku.push($(this).val());
}
});
if(sku.length!==0){
sku_attrubute[name] = sku;
}
});
console.log(sku_attrubute);
之后用$.post 传输这个对象即可,over
$.post("{:url('product/product_attribute_addcl')}",{id:id,attribute:attrubute,sku_attrubute:sku_attrubute},function(data){
if(data.ok=='1'){
alert(data.message);
parent.location.reload();
}else{
alert(data.message);
}
},'json');