基于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>");}}})})

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

最新王者荣耀英雄图像及语音包查询源码
正文: 王者荣耀个性语音包查询系统开源源码,王者荣耀个性语音包查询系统上传解压即可使用,可以在线获取王者荣耀英雄的语音包,看起来还是蛮不错的,蛮好看的一个东西. 程序: wwuef.lanzouf. ...
java增删改查实例源码_Spring Data JPA 实现简单的CRUD增删改查源码案例
Spring专题 Spring Data JPA 实现简单的CRUD增删改查源码案例 Spring Data JPA旨在简化JPA基础知识库构建和减少需要与数据库进行通信的代码量.第一部分是如何配置H ...
【SpringBoot集成ElasticSearch 02】Java HTTP Rest client for ElasticSearch Jest 客户端集成（配置+增删改查测试源码）【推荐使用】
1.简介 SpringBoot 项目初始化时就有 NoSQL 选项 Spring Data Elasticsearch(Access+Driver) 此时 pom 文件里引入的依赖是 spring-b ...
web前端期末大作业基于HTML+CSS+JavaScript角色管理(带增删改查功能)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 学生管理系统网页设计 | OA管理系统 | 后台管理模板 | ...
jQuery实现王者荣耀英雄列表
用jQuery实现了王者荣耀的英雄列表,包含对英雄的增删改查功能,并且实现了本地存储功能一.作品介绍 1.作品使用到的技术栈开发工具:Vscode 语言:html.css.jQuery 2.作品实 ...
王者荣耀改名神器助手微信小程序源码下载,支持流量主模式
这是一个强大的改名神器,强大的生成功能输入您想要制作的名字可以一键生成N个重复名供您选择这样就不用担心有些重复名被别人使用了导致无法使用另外还有英雄昵称,提供多种昵称分类自动生成比如情侣名字, ...
（已更新）王者荣耀改名神器助手微信小程序源码下载
这是一个强大的改名神器,强大的生成功能输入您想要制作的名字可以一键生成N个重复名供您选择这样就不用担心有些重复名被别人使用了导致无法使用另外还有英雄昵称,提供多种昵称分类自动生成比如情侣名字, ...
android开发c s架构,【开源】基于C/S架构的Android员工增删改查客户端
背景:html 期末快到了,各门课的课程设计都要来临了,最近Java课的课程设计就在想着作什么好,因而想了下弄一个android的应用吧,因而便有下文了.java 刚入门android,技术很不过关, ...
ext store 数据修改_Go 数据存储篇（一）：基于内存存储实现数据增删改查功能...
在 Web 编程中,经常需要处理用户请求数据,而用户请求数据的处理往往又涉及到数据存储与获取,支持存储数据的媒介很多,包括内存.文件系统.数据库等,接下来,学院君将花几个篇幅的教程来系统介绍 Go W ...

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

增

删

查

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

最新文章

热门文章

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

增

删

查

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

最新文章

热门文章

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

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