为特定class所有实例加类名实现多区块货币选择、展开同步的代码修复
问题分析
- 货币识别逻辑错误:代码中通过
this.id拆分获取货币类型,但所有货币按钮的id属性为空,无法取到对应货币值,导致选中逻辑无法全局生效。 - 「Show more」事件绑定位置错误:该点击事件被嵌套在货币按钮的点击回调内部,只有用户先点击过一次货币按钮,「Show more」才会被绑定事件,这是它经常触发失败的核心原因,且每次点击货币按钮都会重复解绑再绑定事件,逻辑冗余混乱。
- 选中同步逻辑错误:移除所有货币按钮的
active类后,仅给当前点击的单个按钮添加active,没有给其他区块的同类型货币按钮加类,无法实现跨区块同步选中。 - 存在无效冗余代码:
$('.currencies')、$('.currency-' + currency)两个选择器在提供的HTML结构中没有对应元素,属于无效代码。
修复方案
仅需要替换原JS代码即可,CSS和HTML无需修改:
jQuery(document).ready(function() { var $ = jQuery; // 绑定货币按钮点击事件 $('.currency-btn').off('click').on('click', function(event) { event.preventDefault(); // 从按钮class属性中提取货币标识,匹配xxx-btn的格式 const currencyClass = [...this.classList].find(cls => cls.endsWith('-btn')); if (!currencyClass) return; // 全局移除所有货币按钮的选中状态 $('.currency-btn').removeClass('active'); // 给所有区块的同类型货币按钮添加选中状态 $('.' + currencyClass).addClass('active'); }); // 全局绑定Show more点击事件,不要嵌套在货币按钮点击逻辑内 $('a.currency-more').off('click').on('click', function(e) { e.preventDefault(); // 所有区块同步显示隐藏的货币按钮和对应分隔符 $('.currency-btn').show().prev('span').show(); // 所有区块同步移除Show more按钮和对应分隔符 $('.currency-more').remove(); }); });
修复后可完全满足需求:
- 点击任意区块的货币按钮,所有区块的对应货币都会同步处于选中状态
- 点击任意区块的「Show more」,所有区块的货币列表都会同步展开
内容的提问来源于stack exchange,提问作者user1038814
相关产品推荐
相关产品推荐

