以前只是見過很多動態添加內容的效果，這次還是自己第一次在項目里接觸到呢，就簡單記錄下來了，希望對大家有幫助。

這里的效果是選中一個選擇框，對應的內容區就會相應的出現對應的詳細內容，取消選擇框，對應的內容就會消失，點擊前的效果如下：

點擊后效果如圖：

具體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的打賞，我們會更加努力！????如果您想成為作者，請點我

總結

以上是生活随笔為你收集整理的动态添加 ajax,ajax动态的添加内容【原创】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。