实现功能:点击选项之后,筛选出对应的产品

实现功能:点击选项之后,筛选出对应的产品

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>

猜你喜欢

转载自blog.csdn.net/qq_37815596/article/details/82896697
今日推荐