js点击多个同类元素 只能点击一次 必须循环出来

最新推荐文章于 2024-12-12 10:32:16 发布
最新推荐文章于 2024-12-12 10:32:16 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/webZRH/article/details/70160802
本文展示了一个简单的积分兑换优惠券的网页示例，通过HTML、CSS和JavaScript实现了优惠券列表及点击效果。用户可以直观地看到不同额度优惠券所需的积分。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

//css

.duihuan{
display: flex;
justify-content:space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.coupon_list{
padding: 10px;
border-bottom: 2px solid yellow;
}
.coupon_list dl{
display: inline-block;
width: 49%;
text-align: center;
color:red;
}
.coupon_list dl dt img{
width: 100%;
}


//html

<div class="coupon_list" id="coupon_list">
    <dl>
    <dt><img src="../images/money5.png"></dt>
    <dd>需消耗：500积分</dd>
    </dl>
    <dl>
    <dt><img src="../images/money10.png"></dt>
    <dd>需消耗：1000积分</dd>
    </dl>
    <dl>
    <dt><img src="../images/money20.png"></dt>
    <dd>需消耗：2000积分</dd>
    </dl>
    <dl>
    <dt><img src="../images/money50.png"></dt>
    <dd>需消耗：5000积分</dd>
    </dl>
    </div>


//js

<script type="text/javascript">

var list=document.querySelector(".coupon_list");
var dl=list.getElementsByTagName("dl")
var len=dl.length;
for(var i=0;i<len; i++){   //循环出来
dl[i].onclick=function(){
alert(2)
}

}



//alert(this.className);弹出类名


</script>
个人看法
关注
js实现多个checkbox至少选择一个的判断
iPerseverance的专栏
05-28 6399
最近遇到多个checkbox至少选中一个才能submit的判定。百度了很久没找到一个简单易懂的，没找到一个能让我看得懂的（本人菜鸟，看不懂大神们的方法）。研究了N久终于用通俗易懂的方法实现。我是用checkbox的id实现的，所以id命名时最好有点规律以方便在for loop里面轻易实现。如果没有选中一个就点击Apply，则会弹出提示，且不会submit。记忆力不好，写此笔记仅做个人经验积累用。
小程序数组 显示第一个 点击完成 显示下一个_小程序学习（4）
weixin_39905037的博客
12-03 1083
小程序学习--功能扩展学习在前面学习完了设计结构 ，顺序，条件，循环结构以及基本页面布局，逻辑层和视觉层之间的通信。。案例一 随机数求和(1)案例描述和设计思路实现效果(2)详细代码实现和解释1.wxml中文件首先是外边框，标题然后view的文本提示通过列表进行循环wx:for="{{rand}}"，列表渲染，rand是从js中传过来的数值，item是数组里的元素,显示元素，后显示随...
js实现只能点击一次的按钮
这个人很懒，没有博客简介...
12-15 1927
一个按钮，首次点击执行函数，后面不执行函数内容
用js实现或者once事件修饰符保证按钮只能点击一次（用于提交数据或操作数据库时）
H-rosy的博客
08-05 6535
今天在使用添加按钮添加记录突然添加了好几条记录，把我都看呆了。今天我分享两种方法：使用@click.once实现button只能点击一次，适用于提交表单记录或者进行数据库的操作确定。自定义方法可以写下一个js文件中实现复用。这是参考一位大佬的文章，但是觉得在具体使用上不够小白，于是我就用自己的例子来演示一下下。.........
js事件只执行一次
qq_33298964的博客
11-07 4590
一事件只执行一次，有以下两种方法。
js实现点击切换TAB标签实例
10-23
通过循环，可以对多个同类的HTML元素进行操作，如设置属性、添加事件监听等。在这个实例中，可能会用到循环来遍历所有的选项卡"li"元素，为它们分别设置事件监听器，并在点击事件触发时更新界面元素。 ### 知识点三...
js批量给数组元素添加序号
seimeii的博客
04-18 861
js批量给数组元素添加序号
javascript获取所有同类checkbox选项(实例代码)
10-26
复选框是一种表单元素，允许用户选择或取消选择多个选项。复选框在HTML中使用`<input>`标签并设置其`type`属性为`checkbox`来定义。通常会设置`name`属性来标识复选框属于哪一组。 3. 获取复选框状态 在JavaScript...
微信小程序5-图片实现点击动作和动态加载同类数据
musi35221的博客
12-12 1448
动物觅踪，寻找动物小程序，微信小程序，图片实现点击动作，动态加载同类数据，微信小程序循环，按钮添加图片
网易云音乐播放器移动端项目源码基于uniapp多端开发,音乐播放、进度、缓存进度条监听，视频播放、上下滑动切换、加载相关同类视频
01-13
uniapp是一款由DCloud（数字天堂）推出的跨平台开发工具，它基于Vue.js，支持编写一次代码，发布到iOS、Android、H5等多个平台。uniapp通过高度封装的组件和API，使得开发者可以方便地进行移动应用开发，极大地提高...
autojs 多控件点击
weixin_73740490的博客
12-22 3383
autojs 控件点击
js如何解决多个相同class属性之间，选择当前的class属性
qq_34665877的博客
01-22 3782
【javascript】js实现使用循环生成多个元素的点击事件
weixin_43559672的博客
09-10 2143
原生js实现循环生成多个button的点击事件，效果：按哪个按钮哪个按钮的背景变为粉色。
判断字符串/列表中的元素是否只出现一次，以及找到只出现一次的元素
哪惧明天，风高路斜
08-04 2981
判断字符串/列表中的元素是否只出现一次，以及找到只出现一次的元素。
用js实现只能点击一次的按钮的功能
灰太狼-铜豌豆的博客
08-11 1万+
有时候需要用到，网页中的提交表单按钮，让用户只能点一次，以避免重复提交表单。 <a href="javascript:void(0);" onclick="this.innerHTML='提交中';this.onclick='';this.removeAttribute('href')">按钮
微信小程序防止多次点击事件（一分钟内一次有效）
热门推荐
Judy1623
09-20 1万+
var m = date.getMinutes().toString();//获得当前分钟数 console.log('提交外面的') console.log(m) console.log(date.getMinutes()) //开始缓存池中没有分钟数，当前分钟数肯定不等于缓存中的分钟数，当前可以执行 if (m != wx.getStorageSync('m')){ wx.setSt...
Js 希望某链接只能点击一次
weixin_30826095的博客
08-25 149
<a onclick=”function(){...}”> 希望这连接只能执行一次 <a onclick=”function(){...}; this.onclick()=function(){}”> 转载于:https://www.cnblogs.com/8000cabbage/p/7428028.html...
我如果我有多个这种下拉框，如何能获取每个下拉选择的值
最新发布
04-01
<think>好的，用户之前问过如何获取单个下拉框的值，现在他们的问题是如果有多个类似的下拉框，如何获取每个的值。我需要先理解用户的具体需求。他们可能有多个相同结构的下拉框，每个有不同的选项，或者可能是动态生成的多个下拉框。 首先，用户提供的HTML示例中有一个下拉框，使用name="categories"和class="category3"。如果有多个这样的下拉框，可能的做法是为每个下拉框分配唯一的name或class，或者使用相同的class来标识它们。比如，可能有多个具有相同class但不同name的下拉框，或者多个相同的结构，但动态生成的。 接下来，我需要考虑用户如何获取每个的值。用户可能想一次性获取所有下拉框的值，或者在每个下拉框变化时获取对应的值。这时候，可能需要遍历所有下拉框元素，并绑定事件监听器或者直接获取它们的值。 对于多个下拉框的情况，通常有两种处理方式：共同class标识或不同的name属性。如果用户使用相同的class，比如都使用category3，那么可以用querySelectorAll获取所有元素，然后循环处理。如果每个下拉框有不同的name，可能需要分别处理，但如果是动态生成的，可能更倾向于用共同的class。 然后，我需要考虑如何组织代码。例如，使用事件委托来减少事件监听器的数量，或者在表单提交时统一收集所有下拉框的值。另外，可能需要处理动态添加的下拉框，这时候事件委托会更有效，因为新元素会自动继承事件监听。 还要注意，用户可能希望得到的值是一个对象，包含每个下拉框的标识和对应的值，比如使用name作为键，value作为值。这样在提交表单或处理数据时会比较方便。 可能的错误点包括：没有正确选择所有下拉框元素，比如遗漏了某些元素；没有处理动态添加的元素导致事件监听失效；或者没有处理下拉框未选择时的默认值。需要提醒用户处理这些情况，比如检查value是否存在，或者设置默认值。 另外，用户可能希望示例代码能够展示不同的情况，比如共同class的情况和不同name的情况，或者动态添加的情况。因此，我需要提供几种不同的方法，并说明各自的适用场景。 最后，要确保语言清晰，步骤明确，让用户能够根据不同的需求选择合适的方法，并提供注意事项，比如DOM加载完成后执行脚本，处理禁用选项等。</think>当存在多个同类下拉框时，可以通过以下两种方式高效获取每个下拉框的值： --- ### **方法一：共用相同class的批量处理** **适用场景**：多个下拉框使用相同的class（如示例中的`.category3`） ```html <!-- HTML结构示例 --> <select class="category3" name="category1">...</select> <select class="category3" name="category2">...</select> ``` **JavaScript实现**： ```javascript // 1. 获取所有下拉框元素 const allSelects = document.querySelectorAll('.category3'); // 2. 批量绑定change事件 allSelects.forEach(select => { select.addEventListener('change', function() { console.log(`下拉框 ${this.name} 的值为: ${this.value}`); }); }); // 3. 统一获取所有值（对象形式） function getAllValues() { const values = {}; allSelects.forEach(select => { values[select.name] = select.value; }); return values; } // 调用示例：console.log(getAllValues()); ``` --- ### **方法二：不同name属性的独立处理** **适用场景**：下拉框有不同name但需统一处理 ```html <select name="userType">...</select> <select name="department">...</select> ``` **JavaScript实现**： ```javascript // 1. 定义需要监控的下拉框name集合 const targetNames = ['categories', 'userType', 'department']; // 2. 动态绑定事件 targetNames.forEach(name => { const select = document.querySelector(`select[name="${name}"]`); if(select) { select.addEventListener('change', () => { console.log(`${name}变更：`, select.value); }); } }); ``` --- ### **方法三：事件委托（推荐用于动态元素）** **适用场景**：动态添加的下拉框或减少事件监听器数量 ```javascript document.addEventListener('change', function(event) { if(event.target.matches('select.category3')) { const select = event.target; console.log(`动态下拉框 ${select.name} 的值: ${select.value}`); } }); ``` --- ### **注意事项** 1. **空值处理**：通过`select.value || 'default'`设置默认值 2. **禁用状态**：检查`select.disabled`属性 3. **动态元素**：推荐使用事件委托（方法三） 4. **数据整合**：可将所有值存入对象： ```javascript const formData = { userType: document.querySelector('[name="userType"]').value, department: document.querySelector('[name="department"]').value }; ``` --- ### **完整示例** ```html <script> document.addEventListener('DOMContentLoaded', () => { // 方法一 + 方法三结合 const selects = document.querySelectorAll('.category3'); // 静态元素直接绑定 selects.forEach(select => { select.addEventListener('change', handleSelectChange); }); // 动态元素通过委托处理 document.addEventListener('change', event => { if(event.target.matches('.category3')) { handleSelectChange.call(event.target); } }); function handleSelectChange() { console.log(`[${this.name}] 当前选择:`, this.value); } }); </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值