You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

为特定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();
  });
});

修复后可完全满足需求:

  1. 点击任意区块的货币按钮,所有区块的对应货币都会同步处于选中状态
  2. 点击任意区块的「Show more」,所有区块的货币列表都会同步展开

内容的提问来源于stack exchange,提问作者user1038814

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 01:21:03