动态添加 ajax,ajax动态的添加内容【原创】

以前只是见过很多动态添加内容的效果，这次还是自己第一次在项目里接触到呢，就简单记录下来了，希望对大家有帮助。

这里的效果是选中一个选择框，对应的内容区就会相应的出现对应的详细内容，取消选择框，对应的内容就会消失，点击前的效果如下：

点击后效果如图：

具体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的打赏，我们会更加努力！    如果您想成为作者，请点我