如何实现按钮上展示点击顺序，多次点击时拼接对应序号

原生JavaScript实现 #

无需修改你现有的HTML代码，直接加入如下JS代码即可生效：

// 初始化全局点击次数计数器
let totalClickCount = 0
// 存储每个按钮的点击序号记录，key为按钮id，value为对应序号数组
const clickRecordMap = {}

// 获取所有class为name的按钮
const buttons = document.querySelectorAll('.name')
buttons.forEach(btn => {
  // 每个按钮上方插入用来显示序号的span元素
  const orderDisplay = document.createElement('span')
  orderDisplay.style.display = 'block' // 让span在按钮上方单独占行
  btn.before(orderDisplay)
  
  // 绑定点击事件
  btn.addEventListener('click', () => {
    // 总点击数自增1，作为当前点击的全局序号
    totalClickCount++
    const btnId = btn.id
    // 该按钮首次点击时初始化存储数组
    if (!clickRecordMap[btnId]) {
      clickRecordMap[btnId] = []
    }
    // 将当前全局序号存入该按钮的记录中
    clickRecordMap[btnId].push(totalClickCount)
    // 拼接为&分隔的字符串更新显示
    orderDisplay.textContent = clickRecordMap[btnId].join('&')
  })
})

jQuery实现 #

如果你的项目已经引入了jQuery，可以使用以下简化版本，逻辑和原生版本完全一致：

// 初始化全局点击次数计数器
let totalClickCount = 0
// 存储每个按钮的点击序号记录
const clickRecordMap = {}

$('.name').each(function() {
  // 插入序号显示元素
  const $orderDisplay = $('<span>').css('display', 'block')
  $(this).before($orderDisplay)
  
  // 绑定点击事件
  $(this).on('click', function() {
    totalClickCount++
    const btnId = this.id
    if (!clickRecordMap[btnId]) {
      clickRecordMap[btnId] = []
    }
    clickRecordMap[btnId].push(totalClickCount)
    $orderDisplay.text(clickRecordMap[btnId].join('&'))
  })
})

核心逻辑说明 #

• 全局计数器totalClickCount记录所有按钮的总点击次数，每次点击任意按钮都会自增，这个值就是当前点击的全局次序
• 用clickRecordMap对象按按钮id存储每个按钮对应的所有点击序号，避免不同按钮的记录互相干扰
• 每个按钮前置插入独立的显示元素，每次点击后直接更新对应元素的文本内容即可

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