zoukankan      html  css  js  c++  java
  • for 循环遍历数据,根据不同的条件判断动态渲染页面!

    整体的逻辑为:for 循环遍历出数据,在for 循环里判断,根据不同的条件渲染

    一、html页面结构

    二、css就不再写了

      

    三、JS逻辑代码

              var listGroup=''  
                    for(var k = 0;k<data.info.categoryNewsList.length;k++){
                        //判断列表图片是否为单图
                        if(data.info.categoryNewsList[k].imgsrc2==null){
                            //如果为单图渲染
                            listGroup += '<ul>
                                            <li class="img-model">
                                                <div class="news-left">
                                                    <p class="recommend-h">' + data.info.categoryNewsList[k].title + '</p>
                                                    <p class="getTime">'+data.info.categoryNewsList[k].source+'</p>
                                                </div>
                                                <div class="news-right"><img  class="recommend-img" src='+data.info.categoryNewsList[k].imgsrc0+'></div>
                                            </li>
                                        </ul>'
                        }else{
                            //如果为多图渲染
                            listGroup += '<ul>
                                                <li class="imgs-model">
                                                    <div>
                                                        <p class="recommend-title">'+ data.info.categoryNewsList[k].title +'</p>
                                                    </div>
                                                    <div class="recommend-imgs" ><img src='+data.info.categoryNewsList[k].imgsrc0+'><img src='+data.info.categoryNewsList[k].imgsrc1+'><img src='+data.info.categoryNewsList[k].imgsrc2+'></div>
                                                    <div class="news-source">'+data.info.categoryNewsList[k].source+'</div>
                                                </li>
                                        </ul>'
                        }    
                    }
                    $('.recommend-list').append(listGroup)

    请求返回的数据为

    最终效果图

  • 相关阅读:
    Oracle----oracle编程总结
    Oracle----oracle 事务总结
    Oracle----Oracle 11g XE release2安装与指导
    KMP之Z-function (扩展kmp)
    pkg-config
    对拍
    GPU并行编程小结
    DPHARD
    贪心/字符串好题
    树专题(伸展树 / 树链剖分 / 动态树 学习笔记)
  • 原文地址:https://www.cnblogs.com/xxflz/p/9641276.html
Copyright © 2011-2022 走看看