JavaScript点击按钮无有效文本 switch分支触发不符合预期问题求助

问题原因排查 #

1. 函数参数语法错误 #

你的buttonData函数参数定义非法，不能直接用card.id作为形参，会直接触发语法报错，正确写法应该是先接收卡片ID字符串或者卡片DOM对象作为参数：

// 正确写法示例
function buttonData(cardId) {
  // 逻辑代码
}

2. 计数逻辑完全不符合预期 #

这是你跳过case0的核心原因：

• 初始状态下btnVal[card.id]是undefined，!undefined等于true，所以第一次调用就直接给它赋值为1，switch直接命中case1，自然不会触发case0
• 你的预期是首次点击触发case0，需要调整赋值逻辑，首次点击赋值为0
  修正后的计数逻辑示例：

// 首次点击赋值为0，之后每次+1，到2之后重置为0
btnVal[cardId] = btnVal[cardId] === undefined ? 0 : (btnVal[cardId] + 1) % 3;

3. 事件绑定错误 #

• 你的按钮class是button1，但jQuery的点击事件绑定的是.button，完全匹配不到按钮，点击根本不会触发绑定逻辑
• 绑定事件里直接写buttonData(b1)，b1没有提前定义为DOM对象，会触发变量未定义报错，需要获取当前点击按钮所属的卡片ID：

$(document).on("click", ".button1", function () {
  // 获取当前按钮所在的卡片ID
  const cardId = $(this).closest('.card').attr('id');
  // 调用函数传入ID
  const data = buttonData(cardId);
  bodyText(data);
});

4. 无效的Callback调用 #

你的代码里Callback函数没有定义，直接调用会报错，完全不需要多余的回调嵌套，拿到buttonData返回的数据后直接调用bodyText即可。

5. 旧内容残留问题 #

你当前的逻辑只在对应content字段存在时赋值，切换case的时候没有清空不需要的内容，比如从case2切到case0时，content2还会保留之前的文本，建议补充清空逻辑：

function bodyText(data) {
  const target = document.getElementById(data.target);
  const content1 = target.getElementsByClassName('content1')[0];
  const content2 = target.getElementsByClassName('content2')[0];
  // 优先清空原有内容
  content1.innerHTML = data.content1 || '';
  content2.innerHTML = data.content2 || '';
}

修正后完整运行示例 #

const btnVal = {}; // 用对象存储键值对比数组更合理
function buttonData(cardId) {
    // 计数逻辑：0→1→2→0循环
    btnVal[cardId] = btnVal[cardId] === undefined ? 0 : (btnVal[cardId] + 1) % 3;
    switch(btnVal[cardId]) {
      case 0:
        return {
          target: cardId,
          content1 : "Nice to code using Js",
        };
      case 1:
        return {
          target: cardId,
          content2 : "Nice to code using JQuery",
        };
      case 2:
        return {
          target: cardId,
          content1 : "Hello",
          content2 : "Greetings",
        };
      default:
        return {};
    }
} 

function bodyText(data) {
  if (!data.target) return;
  const target = document.getElementById(data.target);
  const content1 = target.querySelector('.content1');
  const content2 = target.querySelector('.content2');
  content1.innerHTML = data.content1 || '';
  content2.innerHTML = data.content2 || '';
  // 同步更新按钮文本方便调试
  target.querySelector('.button1').innerText = btnVal[data.target];
}
   
$(document).on("click", ".button1", function () {
  const cardId = $(this).closest('.card').attr('id');
  const data = buttonData(cardId);
  bodyText(data);
});

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