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

news/2024/7/10 23:27:56 标签: 前端, html, javascript, jquery
htmledit_views">

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

效果图

 

 实现:

html"><!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.niftyadmin.cn/n/477853.html

相关文章

Apikit 自学日记:发起文档测试-RPC

以DUBBO接口为例&#xff0c;进入某个DUBBO协议的API文档详情页&#xff0c;点击文档上方 测试 标签&#xff0c;即可进入 API 测试页&#xff0c;系统会根据API文档的定义的请求报文自动生成测试界面并且填充测试数据。 对RPC/DUBBO接口发起测试 填写请求报文参数值 此测试D…

百度排名代发收录怎么上百度

百度排名代发收录怎么上百度&#xff0c;如何提高百度排名&#xff0c;网站提高排名最新手册&#xff01;#seo 今天来点不一样的&#xff0c;就是讲一下百度竞价里边最基础也是最容易踩的一个坑&#xff0c;就是我发现很多人很喜欢把自己推广的产品或者说业务直接作为关键词上…

Jmeter线程组配置

目录 前言&#xff1a; 一、线程组配置字段说明 二、线程组配置示例 前言&#xff1a; JMeter是一款开源的压力测试工具&#xff0c;被广泛应用于测试Web应用程序的性能和负载能力。其中线程组是JMeter中最基本、最重要的功能之一。线程组用于模拟多个并发用户对目标应用程…

如何使用ffmpeg 去除MP3音频文件头部与尾部的静音数据

ffmpeg.exe -i test.txt.mp3 -af silenceremove1:0:-50dB,areverse,silenceremove1:0:-50dB,areverse -c:a libmp3lame output1.mp3 FFmpeg将读取输入的MP3文件&#xff0c;并应用silenceremove音频滤波器。参数1:0:-50dB用于设置滤波器的阈值&#xff0c;以检测和删除静音数据…

Mac 卸载 Python 步骤

1.查看当前 Python 版本 以 python3.11 为例 $ python3 -V Python 3.11.4 2.删除 Python 框架 先在目录 /Library/Frameworks/Python.framework/Versions/ 下确定 python3.11 框架存在&#xff0c;而后执行命令删除&#xff0c;需要注意的是&#xff0c;在执行删除命令时可…

Android SDK file not found: F:\androidSDK\build-tools\34.0.0\aapt

问题表现 执行flutter doctor 的时候&#xff0c;报错Android SDK file not found&#xff0c;很明确的说没有配置 30.0.3 问题解决 首先去报错的SDK路径中排查是否有这个版本。发现有&#xff0c;但是是个空文件夹&#xff0c;所以删除掉该文件夹重新运行 flutter doctor &a…

MATLAB matlab图像压缩程序--采用嵌入式小波零树编码算法源码

MATLAB matlab图像压缩程序--采用嵌入式小波零树编码算法源码 function varargout ezw(varargin) % EZW MATLAB code for ezw.fig % EZW, by itself, creates a new EZW or raises the existing % singleton*. % % H EZW returns the handle to a new EZW or…

CentOS-8 - AppStream 错误:为 repo ‘AppStream‘ 下载元数据失败

刚安装的 CentOS8 系统执行yum命令报错 CentOS-8 - AppStream 为 repo AppStream 下载元数据失败 错误&#xff1a;为 repo AppStream 下载元数据失败 原因&#xff1a;系统默认的yum源的问题…