jQuery实现选中公司类型点击按钮更新abbr-data文本需求求助

解决方案 #

不需要修改你现有的HTML和CSS代码，仅在原有JS逻辑基础上新增按钮点击事件即可实现需求，完整JS代码如下：

$(document).ready(function(){
  // 原有公司类型选中逻辑
  $(".spl-comp-select").on("click", function(){
    $(".spl-comp-select").removeClass("active");
    $(this).addClass("active");
  });
  // 新增点击更新缩写逻辑
  $(".spl-change").on("click", function(){
    // 获取当前选中项的公司缩写
    let currentAbbr = $(".spl-comp-select.active .comp-abbr").text();
    // 同步更新到abbr-data元素
    $(".abbr-data").text(currentAbbr);
  });
});

实现逻辑 #

1. 给「Change Company」按钮绑定点击事件
2. 事件触发时，定位到当前处于激活状态（带active类）的公司选项
3. 读取该选项下存储的公司缩写文本
4. 将缩写文本赋值给.abbr-data元素完成内容更新

内容的提问来源于stack exchange，提问作者CoreTM