js for循环添加html代码

最新推荐文章于 2024-05-28 21:51:52 发布

weixin_34344403

最新推荐文章于 2024-05-28 21:51:52 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/pingheyongfeng/blog/983550

本文介绍了一种使用JavaScript实现的轮播图功能，包括动态生成轮播图组件并提供点击更换图片的功能。此外，还实现了通过AJAX请求更新轮播图的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

###for循环代码 for(var i=0;i<res.data.length;i++){ var bannerPicList = res.data[i]; var bannerId = bannerPicList.id; var displayShow = bannerPicList.show; innerHTML+= "<div style='float:left;width:30%;margin:9px;position:relative;'>"+ "<img style='width:100%;height:150px;' src="+bannerPicList.bannerUrl+">"+ '<button class="btn btn-success" style="position:absolute;top:35%;left:38%;cursor:pointer" data-toggle="modal" data-target=".bs-example-modal-sm" οnclick="changePictureId(\'' + bannerId + '\')">点击更换</button>'+ "<div class='row'>"+ "<div id=displayBlockYes"+bannerId+">"+ "<label class='control-label col-md-4' style='margin-left:12px;'>"+"是否显示图片"+"</label>"+ "<div>";//结束开始做js判断 if(displayShow == true){ innerHTML+= '<input type="checkbox" οnchange="displayBlock(event,\'' + bannerId + '\',\'' + displayShow + '\')" checked>是'; }else{ innerHTML+= '<input type="checkbox" οnchange="displayBlock(event,\'' + bannerId + '\',\'' + displayShow + '\')">是'; } innerHTML+= "</div>"+ "</div>"+ "</div>"+ '</div>';

        }
        $("#bannerPicture").html(innerHTML);

  request请求
    //是否显示轮播图
    function displayBlock(event,id,displayShow){
        console.log(event);
        console.log(id);
        var show;
        if(displayShow == "true"){
            show = false;
           }else{

            show = true;
        }
    $.ajax({

        type:'POST',
        url:pengPengUrl+"/cmsComm/showBannerPic",
        dataType:"json",
        data:{bannerId:id,show:show},
        success:function(res){

            if(res.statusCode == 200){

                console.log(res);
                alert("修改成功");
                bannerPicList();
            }
        },
        error:function(){

            console.log("修改图片失败");
        }
    })

}

转载于:https://my.oschina.net/pingheyongfeng/blog/983550