2 xiyingxia3117 xiyingxia3117 于 2017.04.21 19:17 提问

用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个回答

showbo
showbo   Ds   Rxr 2017.04.21 20:23

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

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!