前端开发：实战场景—解决同一个item可以被多次选择的需求

最新推荐文章于 2024-05-16 18:59:48 发布
置顶 最新推荐文章于 2024-05-16 18:59:48 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 大前端开发常识 文章标签： findIndex的使用 前端开发 同一个item可被多次选择
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/CC1991_/article/details/108486066
版权
大前端开发常识 专栏收录该内容
94 篇文章 5 订阅 ¥159.90 ¥299.90
订阅专栏
本文介绍了如何在前端项目中解决同一item被多次选择的问题，通过在item点击事件中利用findIndex方法判断item是否已被选中，避免了重复选择。详细操作步骤包括在模板和方法中实现相关逻辑，最终达到预期效果。
摘要由CSDN通过智能技术生成

最近在修改接手的一个前端项目的时候，有一个优化需求：需要禁止同一个item被同时选择多次的问题。具体需求如下所示：

其实上述问题很简单，只用在item的点击事件里面做一个同一个item禁止多选的处理即可，但是本篇博文之所以拿出来要“小题大做”，还是要顺便再介绍一下findIndex() 方法的使用。

具体的操作如下所示：

1、

了解本专栏 订阅专栏 解锁全文
三掌柜666
关注
专栏目录
订阅专栏
前端开发：运用移动端思想简单实现自定义列表item
软贱开发攻城狮
05-09 1672
前言 在前端开发中，使用Vue开发移动端项目的时候，为的就是仿照app的风格来实现业务需求效果。仿移动端原生开发的前端项目，实现业务需求直接可以参考移动端原生开发的思路即可，也就是说如果移动端原生开发者用Vue做基于移动端的时候，是非常有优势的，运用移动端的思维适用于各种移动端项目开发。本文主要是分享一下通过移动端原生思维来实现列表界面的item实现的业务需求，主要是为了体现移动端原生思想运用于前端开发。 业务场景 在实际工作中，基于移动端的前端项目，说白了也就是通过前端技术实现移动端的效果，目前
DDE前端（二）：item分类
袁成路 的专栏
08-02 1209
源代码：https://github.com/linuxdeepin/dde/blob/develop/resources/desktop/js/desktop_item.coffee class Item extends Widget class DesktopEntry extends Item 1. class Folder extends DesktopEntry
jquery function_小猿圈web前端教程之jquery中为什么能用$操作
weixin_39625258的博客
11-29 97
WEB前端是较火的编程语言之一，但是对于没有基础的同学来说，不知道怎么学习，不知道从何处下手，针对以上内容小猿圈web前端讲师每天会总结一些知识点分享给大家，希望对你的前端学习有一定的帮助，今天分享的是jquery中为什么能用$操作。jq对dom节点的操作$("input").val("value");在没看源码之前，我的猜想是这样的function Dom(selector){this.dom ...
下拉选框多次选择同一个选项_关于选择菜单的“套路”
weixin_39786706的博客
12-04 547
上期文章中对搜索功能进行了拆解和细化，本期继续探讨一下单选框、下拉选择框等这一类选择菜单的使用方法。在使用工具型产品时，我们经常能够遇到各式各样的组件，列表、下拉框、按钮、搜索等，这些组件的使用并不是随随便便摆放的，都有一定的原理和规范可循，今天就来聊一聊关于“选择菜单”的那些套路。选择菜单主要分为三类：开关、单选/多选框、下拉列表。（这里我将单选框和复选框归为一类）一、开关使用场景：开关适用于具...
前端学习（3120）：item中的key
歌谣的博客
07-18 331
vue 将字符串最后一个字符给替换_前端开发：Vue项目实战-Music
weixin_39528289的博客
10-27 1039
大家好，我来了，本期为大家带来的前端开发知识是”前端开发：Vue项目实战-Music“，有兴趣做前端的朋友，和我一起来看看吧！主要内容项目环境搭建路由导航实现ListView列表网络请求第三方组件-轮播图自定义组件-tabs回到顶部Iconfont引入歌曲详情页歌曲播放歌词处理学习目标第一节 Music项目环境第一部分Vue 本届作业聊一聊React和Vue的区别老版本的项目环境如何创建项目第二节...
2024前端开发必会面试题和多种实战技巧
02-24
- 目的是在多次触发事件后，事件处理函数只执行一次。 - **实现原理**： - 使用定时器来延迟事件处理函数的执行。 - 如果在延迟期间又触发了事件，则重置定时器。 - 一旦延迟期结束，无论后续是否继续触发事件...
前端开发入门到实战：计算一个页面内每个模块的曝光时间（停留时间）
软件开发-前端开发-IT
07-29 1057
产品希望看到投放出去的活动页，用户对其页面内的什么信息比较感兴趣，对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间 第一次听到这个需求，我的大脑开始疯狂运转，然后想到了plan 1, plan 2, plan3…中间还有很多失败想法我已经忘记了，这里方案三是我最终采用的方法。 方案一：根据页面dom将页面分模块 var bodyChildrenLists = $('body')....
WEB 前端面试题 （实战）（大全）
m0_64191440的博客
02-07 1745
JavaScriptJS匿名函数就是没有名称的函数匿名函数在项目中主要有两种操作方式第一种形式就是将一个函数当成另一个函数的参数进行使用；// 用户单击的时候执行的操作})第二种形式就是将一个匿名函数赋值给变量进行调用，函数的一种声明方式自执行函数，就是函数在声明完成的同时就会立即执行的函数！自执行函数的特点是声明之后立即执行、只能在创建的同时执行一次无法再次调用执行自执行函数通常都是给网页初始化网页特效或者准备初始数据！;(function(){…}()) 使用较多;
2024年Web前端最新你不知道的JavaScript--Item32 DOM基础详解2_dom里面的item(1)，腾讯前端面试必问
2401_84617246的博客
05-12 311
拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！好好的准备一下简历，毕竟是找工作的敲门砖。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。技术是没有终点的，也是学不完的，最重要的是活着、不秃。
前端面试题总结
学习
06-03 396
选择器拖拽释放：drag、drop媒体播放：video、audio本地存储：localStorage、sessionStorage语义化标签：header、nav、main、aside、article、section、footer增强表单控件canvasbasefont、big、center、font、s、tt、u、frame、frameset、noframesbackground-sizebox-shadowtext-shadowtext-wraptransform：translate()box-sizi
你不知道的JavaScript--Item30 数组进阶全掌握
ali1995的博客
12-12 275
转自：http://blog.csdn.net/i10630226 在程序语言中数组的重要性不言而喻，JavaScript中数组也是最常使用的对象之一，数组是值的有序集合，由于弱类型的原因，JavaScript中数组十分灵活、强大，不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素，JavaScript在同一个数组中可以存放多种类型的元素，而且是长度也是可以动态调整的，可以随着
前端练习Day 3
silenmm的博客
05-07 235
1、选择器，id选择器 #id ，类选择器 .class，标签选择器 item，span.item表示选中class名为item的span，span .item表示选中span下面的class名为item的元素，span, .item表示同时选中span和class名为item的标签 2、css选择器优先级为id>class>标签 3、html5中的Web Storage包括了两...
Vue入门（二）——基本语法和组件
qq_44334291的博客
07-05 1742
之前我写到过关于Vue的简单介绍，这次我给大家一次说一下他们中的具体使用是如何的 首先我们来说一下Vue的基本语法： v-for：循环遍历，比如我们要一次取出数组中的值，比如我们定义了一个goods的数组，这个时候我们进行访问， item就是代表数组中的每个值，但我们需要用到序号的时候，我们可以这样写，v-for=’(item,index) in goods’ v-bind:动态绑定，具体使用方法如下： 这样写的话相当于我们给这个标签了一个自定义属性，里面的值是一个数组。 v-on：这个是动态绑定一个事
关于前端在一个选择框中选择多个内容的操作
m0_60312879的博客
08-26 1374
关于前端在一个选择框中选择多个内容的操作
map()和forEach()的区别
weixin_51332774的博客
11-15 137
arr.forEach() 对数组进行循环，相当于直接for循环， 没有返回值，不能对它进行加工，只是单纯的循环显示return无效 //item值，index索引，arr该数组（一般没用） arr.forEach(( item, index,arr)=>{ } arr.map 对数组的每一项进行加工，加工完成之后返回一个新的数组 let arr2 = ['香蕉',"苹果"，"雪梨"] //map,对数组每一项进行加工，加工完成之后返回1个新的数组 let result2 = arr2.map((
Web前端--HTML+CSS+JS新型冠状病毒射击小游戏_js射击小游戏源码
2401_84434331的博客
04-27 981
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
Web前端最全JavaSE学习笔记--Item1 注解Annotation_@item注解(1)，前端高级面试2024
最新发布
2401_84438654的博客
05-16 297
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。Child!
Web前端开发中级考证模拟卷：实战与理论题解析
本资源是一份针对Web前端开发职业技能等级考证的中级理论模拟卷，旨在帮助考生准备2020年下半年的考试。该试卷共分为三个部分：单选题、多选题和判断题，总分100分，时间限制为90分钟。以下是各部分的内容概要： 1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三掌柜666

如果对您有所帮助，请支持一下呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值