js动态添加，jq，ajax

最新推荐文章于 2022-04-21 08:44:48 发布

AleisurE

最新推荐文章于 2022-04-21 08:44:48 发布

阅读量890

点赞数 3

分类专栏： web学习文章标签： jquery

本文链接：https://blog.csdn.net/theLaziestboy/article/details/115827964

版权

web学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js动态添加元素。

$(document).ready(function(){
    function Object(){
        this.key_name="test1";
        this.text="11";
    }
    getList();
    addbutton(); 
    function getList() {
        $.getJSON("data.json", function (res) {
            let str = "";
            $.each(res, function (i, obj) {
                str = "<span class='title'>" + obj.user + "</span>" + "<br/>" + "<span class='text'>" + obj.text + "</span>";
                $(".list").append("<ul><li  class='borderShadow'>" + str + "</li></ul>");
            });
           animateLis();

        });
    }

    function addbutton(){
        $(".container").append("<input id='btnAdd' type='button' value='我也要吐槽'/>");
        $("#btnAdd").text("我也要吐槽");

    }

    function savePostToStorage(value){
        var num = new Object();
        num.key_name = localStorage.getItem("userName");
        num.text = value;

        localStorage.setItem(num.text,num.key_name);
        alert("上传完成");
    }

    $(document).on("click","#btnAdd",function(e){
        if($("#btnAdd").text()==='我也要吐槽'){
            $("#btnAdd").attr('value','吐槽完毕');
            $("#btnAdd").text("写的是真的冗余");
            $(".form").show();

        }else{
            $(".form").hide();
            $("#btnAdd").text('我也要吐槽');
            $("#btnAdd").attr('value','我也要吐槽');

            savePostToStorage($("#post_text").val());
            addPostToPage();
            $("#post_text").val("");
        }
    });


    function addPostToPage(){
        str = "<span class='title'>" + localStorage.getItem("userName") + "</span>" + "<br/>" + "<span class='text'>" + localStorage.getItem("userText") + "</span>";
        $(".list").append("<ul style='display: block'><li  >" + str + "</li></ul>");
    }

function animateLis(){     /*此处遍历ul并按序输出*/
        var time=0;
      $('.list ul').each(function (i){
           $(".list ul").eq(i).delay(time).fadeIn(500);
           time+=1000;
       });
        $("#btnAdd").delay(time).animate({opacity:1});

    }
});