以前只是见过很多动态添加内容的效果,这次还是自己第一次在项目里接触到呢,就简单记录下来了,希望对大家有帮助。
这里的效果是选中一个选择框,对应的内容区就会相应的出现对应的详细内容,取消选择框,对应的内容就会消失,点击前的效果如下:
点击后效果如图:
具体html代码如下:
="xml"]
保养项目 | 已选购产品 | 标准价 | 嘟嘟价 | 数量 |
js代码:
$(".protect-active").each(function(){
var item_id = $(this).data('id');
if ( -1 == $.inArray(item_id, item_ids) ) {
item_ids.push(item_id);
}
// 获取已选中的id
$("input[name='item_id[]']").val(item_ids);
var request = $.ajax({
url: '{{ path("frontend_subsidy_selectItem") }}',
data: {item_id: item_ids},
dataType: "json",
type: "POST",
}).done(function(response){
for(var i=0; i
var item = response.item_info[i];
var html_table = '
var html_gray = '';
html_gray +='
';var url = "{{ path('frontend_info_subsidyServerInfo',{id:'wederfde',type:2}) }}";
url = url.replace("wederfde",item.id);
html_gray += '
'+item.title+'';html_gray += '
';html_gray += '
¥'+item.price_origin+'';html_gray += '
¥'+' '+item.price+'';html_gray += '
';html_gray += '
';html_gray += '
删除
';html_gray += '
';html_gray +='
';html_gray +='
';// 获取总价
var money_select = parseFloat(item.price);
console.log(money_select);
money = accAdd(money, money_select);
console.log(money);
$(".all-pay-price").text(money);
var html_list = '
';for( var j=0; j
var item_list = item.data[j];
for(var m=0; m
html_list += '
';var data = item_list.data[m];
var html_td = '';
if (m==0) {
html_list += '
'+item_list.typeName+'';}
html_td += '
'+data.introduce+'
';html_td += '
'+data.price_origin+'
';html_td += '
'+data.price_item+'
';html_td += '
';html_td += '
';html_list += html_td;
html_list += '
';}
}
html_list+= '
';html_table = html_table + html_gray + html_list;
html_table += '
';}
转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/15500.html
微信打赏
支付宝打赏
感谢您对作者erin的打赏,我们会更加努力! 如果您想成为作者,请点我