不想在你心上流浪 2017-04-21 11:17 采纳率: 0%
浏览 4214

用ajax方法在请求数据后在写了一些HTML,但是样式却丢失了

  • 这是静态页面的效果图 静态页面效果 这是这一部分的HTML,只截取了两个商品的
    <div class="maincontent-area">
        <div class="zigzag-bottom"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="latest-product">
                        <h2 class="section-title">Latest Products</h2>
                        <div class="product-carousel" **id="content2"**>
                            <div class="single-product">
                                <div class="product-f-image">
                                    <img src="img/product-1.jpg" alt="">
                                    <div class="product-hover">
                                        <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                        <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                    </div>
                                </div>

                                <h2><a href="single-product.html">Samsung Galaxy s5- 2015</a></h2>

                                <div class="product-carousel-price">
                                    <ins>$700.00</ins> <del>$100.00</del>
                                </div> 
                            </div>
                            <div class="single-product">
                                <div class="product-f-image">
                                    <img src="img/product-2.jpg" alt="">
                                    <div class="product-hover">
                                        <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                        <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                    </div>
                                </div>

                                <h2>Nokia Lumia 1320</h2>
                                <div class="product-carousel-price">
                                    <ins>$899.00</ins> <del>$999.00</del>
                                </div> 
                            </div>
                            <div class="single-product">
                                <div class="product-f-image">
                                    <img src="img/product-3.jpg" alt="">
                                    <div class="product-hover">
                                        <a href="#" class="add-to-cart-link"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                                        <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i> See details</a>
                                    </div>
                                </div>

                                <h2>LG Leon 2015</h2>

                                <div class="product-carousel-price">
                                    <ins>$400.00</ins> <del>$425.00</del>
                                </div>                                 
                            </div>

我在上面定义了ID然后用ajax 写了拼的字符串,写的HTML,但是样式却加载不进去,却成了这样字的图片说明
我的js代码如下

 function init_newProd(){
                    $.ajax({
                        type:"post",
                        url:"/struts2/petShop/home/newProduct.action",
                        dataType:"json",
                        success:function(data){
                         var d = eval("("+data+")");//这里需要进行json处理,将json字符串转换为json格式;
                         display_newProd(d);
                        }
                    });
                }
               function display_newProd(data){
                var newProd = data.newProd;
                var newProd_l = newProd.length;
                var content = $("#content2");
                var str= "";
                for(var i=0;i<newProd_l;i++){
                    str = str+"<div class='single-product'>" +
                    "<div class='product-f-image'>"+
                    "<img style='height:270px' src='/struts2/common/img/"+newProd[i].pet_pic+"'>"+
                    " <div class='product-hover'>"+
                    " <a href='"+newProd[i].pet_id+"' class='add-to-cart-link'><i class='fa fa-shopping-cart'></i> Add to cart</a>"+
                    " <a href='/struts2/petShop/detail/detail.action?petId="+newProd[i].pet_id+"' class='view-details-link'><i class='fa fa-link'></i> See details</a>"+
                    "</div></div>"+
                    "<h2><a href='single-product.html'>"+newProd[i].pet_name+"</a></h2>"+
                    " <div class='product-carousel-price'>"+
                    "<ins>$700.00</ins> <del>$"+newProd[i].pet_price+"</del>"+
                    "</div></div>";
                }
                content.append(str);
    }

请问各位大神,到底是上面情况,导致样式改变,静态页面需要的css,js我全部引入,并且顺序呢我没有更改
用到的js插件有这些

<!-- jQuery sticky menu -->
<script src="/struts2/common/js/owl.carousel.min.js"></script>
<script src="/struts2/common/js/jquery.sticky.js"></script>

<!-- jQuery easing -->
<script src="/struts2/common/js/jquery.easing.1.3.min.js"></script>

<!-- Main Script -->
<script src="/struts2/common/js/main.js"></script>

<!-- Slider -->
<script  src="/struts2/common/js/bxslider.min.js"></script>
<script  src="/struts2/common/js/script.slider.js"></script>
  • 写回答

1条回答

  • Go 旅城通票 2017-04-21 12:23
    关注

    你那个应该是焦点图吧,一般动态插入的项不会重新渲染的,得用焦点图的api来插入重新渲染过ui,而不是直接更新原来的dom,焦点图类库的ui一般不会更新

    自己找你这个焦点图的api来看

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题