实现功能:点击选项之后,筛选出对应的产品
1.注意替换后台提供的url
2.beforeSend: function(){
$("#xunhuan2").html("");
},
实现在发送前,清空内容
3.html+=``,将清空内容下方的html代码复制粘贴到``内,然后将html+=`内容`复制到网站https://babeljs.io/repl,将转化好的内容粘贴到js代码处。注意粘贴html代码时,将$符号写到{}外面
4.然后将html追加到合适的标签上
html代码
<div class="row" id="xunhuan">
{foreach name="product" item="pro"}
{if condition="$pro.volumes neq 0"}
<div class="col-lg-3 col-md-4 volumedetail">
<a href="{:url('arrivals/detail')}"><img id="volumeimg" src="{$pro.images}" alt=""></a>
<h3>{$pro.item_no}</h3>
<p>{$pro.name}</p>
<a href="javascript:void(0)" class="add">Add to Bag</a>
</div>
{/if}
{/foreach}
</div>
js代码
$(".vobox").click(function(){
var name = $(this).attr('data');
var html="";
$.ajax({
type: "POST",
url: "/news/newProajax",
data: {volumes:name},
beforeSend: function(){
$("#xunhuan").html("");
},
success: function(name){
console.log(name)
var len = name.length;
for(var i=0;i<len;i++){
html += "\n<div class=\"col-lg-3 col-md-4 volumedetail\">\n<a href=\"{:url('arrivals/detail')}\"><img id=\"volumeimg\" src=\"" + name[i].images + "\" alt=\"\"></a>\n<h3>" + name[i].item_no + "</h3>\n<p>" + name[i].name + "</p>\n<a href=\"javascript:void(0)\" class=\"add\">Add to Bag</a>\n</div>\n";
}
$("#xunhuan").append(html);
}
});
})
</script>