基于jQuery实现王者荣耀英雄自定义增删改查功能 源码

使用JSON实现存储本地功能，此页仅有js部分代码

作品示例图

 

增

给添加按钮添加点击事件，获取输入框的值，添加判断，当值为空时不添加，否则将输入的值存储到本地的数组中，然后保存到本地

//--------增-----------------增
    $("#addbtn").on("click", function () {
        $(".type .cl .all").siblings('li').removeClass("sel");
        $(".type .cl .all").addClass("sel");
        let inputName = $("#hero-name").val();
        let occ = $("#pro").val();
        let img = "images/" + inputName + ".png";
        var local = getDate();
        if (occ == ""||inputName.trim()=="") {
            alert("输入有误！");
            $("#hero-name").val("");
            $("#pro").val("");
        } else {
            local.push({
                heroName: inputName,
                occupation: occ,
                imgurl: img
            })
            $("#hero-name").val("");
            $("#pro").val("");
            saveLocal(local);
        }
    });

删

给每个按钮动态绑定点击事件，获取点击的删除按钮所属于哪一个小li中，然后读取本地中的数据，将数据通过splice()方法删除数据后保存本地然后重新渲染

   // ------------删-----------------------------
    $(".hero").on("click", ".del", function () {
        var local = getDate();
        var index = $(this).parent().parent().attr("id");
        local.splice(index, 1);
        saveLocal(local);
    })

改

改这个当时使用了Bootstrap引用模态框，但是通过引用模态框出现了多次修改的bug，最后应该是因为没有读取本地，而造成记录上一个修改的li，是下次修改时，上一个也发生变化，思路仍旧是先读取本地的json字符串，然后将输入的值放入本地，最后渲染

 //------------------改------------------------
    $(".hero").on("click", ".change", function () {
        var example = $(this).parent().parent();
        // console.log(example);
        var local = getDate();
        $("#heroName").val("");
        $("#occ").val("");
        $("#login").click(function () {
            var index = example.attr("id");
            var nameInput = $("#heroName").val();
            var occInput = $("#occ").val();
            var imgNew = "images/" + nameInput + ".png";
            if(nameInput==""||occInput==""){
                
            }else{
                local.splice(index, 1, {
                    heroName: nameInput,
                    occupation: occInput,
                    imgurl: imgNew
                });
                // console.log(index);
                saveLocal(local);
            }
        })
    })

查

该功能我又重新写了一个模块，让查到的内容显示在查询的div中，然后把原来隐藏的清除按钮显示出来，思路：通过获取输入框的值，给搜索框添加事件，清空div中的内容，再把与本地数据中相匹配的值，添加到div中

 

  //-------------------------查--------------------
    $("#clearSearch").click(function () {
        $(".searchHero").empty();
        $(".searchList").hide();
    })
    $("#searchBtn").click(function () {
        $(".searchList").show();
        var searchName = $("#search").val();
        $("#clearSearch").show();
        var local = getDate();
        // console.log(searchName);
        if (searchName.trim() == ("")) {
            alert("请输入名称");
            $("#search").val("");
        } else {
            $("#search").val("");
            $(".searchHero").empty();
            for (let i = 0; i < local.length; i++) {
                if (searchName == local[i].heroName) {
                    console.log(i);
                    $(".searchHero").append("<li class='heroLi' id=" + i + "><div class='example'><img src='" + local[i].imgurl + "' class='hero-img'><p id='occupation'>" + local[i].occupation + "</p><p class='name'>" + local[i].heroName + "</p></div></li>")
                }
            }

        }
    })

 

 

    //-----------------------分类----------------------
    //全部
    $(".cl").click(function () {
        $(".searchList").hide();
    })
    $(".all").click(function () {
        render();
    })

    //坦克
    $(".tank").click(function () {
        var local = getDate();
        $(".hero").empty();
        for (let i = 0; i < local.length; i++) {
            if (local[i].occupation == "坦") {
                $(".hero").append(
                    "<li class='heroLi' id=" + i + "><div class='example'><img src='" + local[i].imgurl + "' class='hero-img'><img src='images/错误.png' class='del'><button type='button' class='change' data-toggle='modal' data-target='#exampleModal'><img src='images/修改.png' class='changeimg'/></button><p id='occupation'>" + local[i].occupation + "</p><p class='name'>" + local[i].heroName + "</p></div></li>");
            }

        }
    })
    //战士
    $(".warrior").click(function () {
        var local = getDate();
        $(".hero").empty();
        for (let i = 0; i < local.length; i++) {
            if (local[i].occupation == "战") {
                $(".hero").append(
                    "<li class='heroLi' id=" + i + "><div class='example'><img src='" + local[i].imgurl + "' class='hero-img'><img src='images/错误.png' class='del'><button type='button' class='change' data-toggle='modal' data-target='#exampleModal'><img src='images/修改.png' class='changeimg'/></button><p id='occupation'>" + local[i].occupation + "</p><p class='name'>" + local[i].heroName + "</p></div></li>");
            }

        }
    })
    //刺客
    $(".assassin").click(function () {
        var local = getDate();
        $(".hero").empty();
        for (let i = 0; i < local.length; i++) {
            if (local[i].occupation == "刺") {
                $(".hero").append(
                    "<li class='heroLi' id=" + i + "><div class='example'><img src='" + local[i].imgurl + "' class='hero-img'><img src='images/错误.png' class='del'><button type='button' class='change' data-toggle='modal' data-target='#exampleModal'><img src='images/修改.png' class='changeimg'/></button><p id='occupation'>" + local[i].occupation + "</p><p class='name'>" + local[i].heroName + "</p></div></li>");
            }

        }
    })
    //法师
    $(".master").click(function () {
        var local = getDate();
        $(".hero").empty();
        for (let i = 0; i < local.length; i++) {
            if (local[i].occupation == "法") {
                $(".hero").append(
                    "<li class='heroLi' id=" + i + "><div class='example'><img src='" + local[i].imgurl + "' class='hero-img'><img src='images/错误.png' class='del'><button type='button' class='change' data-toggle='modal' data-target='#exampleModal'><img src='images/修改.png' class='changeimg'/></button><p id='occupation'>" + local[i].occupation + "</p><p class='name'>" + local[i].heroName + "</p></div></li>");
            }

        }
    })
    //射手
    $(".shooter").click(function () {
        var local = getDate();
        $(".hero").empty();
        for (let i = 0; i < local.length; i++) {
            if (local[i].occupation == "射") {
                $(".hero").append(
                    "<li class='heroLi' id=" + i + "><div class='example'><img src='" + local[i].imgurl + "' class='hero-img'><img src='images/错误.png' class='del'><button type='button' class='change' data-toggle='modal' data-target='#exampleModal'><img src='images/修改.png' class='changeimg'/></button><p id='occupation'>" + local[i].occupation + "</p><p class='name'>" + local[i].heroName + "</p></div></li>");
            }

        }
    })
    //辅助
    $(".assist").click(function () {
        var local = getDate();
        $(".hero").empty();
        for (let i = 0; i < local.length; i++) {
            if (local[i].occupation == "辅") {
                $(".hero").append(
                    "<li class='heroLi' id=" + i + "><div class='example'><img src='" + local[i].imgurl + "' class='hero-img'><img src='images/错误.png' class='del'><button type='button' class='change' data-toggle='modal' data-target='#exampleModal'><img src='images/修改.png' class='changeimg'/></button><p id='occupation'>" + local[i].occupation + "</p><p class='name'>" + local[i].heroName + "</p></div></li>");
            }

        }
    })

})