为何使用Class的按钮切换功能无法正常工作？

核心问题 #

你代码里的判断逻辑存在关键错误：

• 用 $('.infoBtn').text() 获取文本时，它会把页面上所有带 .infoBtn 类的按钮文本拼接后返回，而不是仅获取当前点击按钮的文本。比如页面上同时存在"info"和"close"状态的按钮，这行代码拿到的会是"infoclose"，直接导致切换逻辑判断失效。
• 切换状态时混用了 .html() 和 .text()，虽然这次没引发严重问题，但统一使用 .text() 更稳妥，能避免意外插入HTML标签。

修复后的代码 #

$(document).ready(function(){
  $('.infoBtn').on('click', function () {
    // 仅获取当前点击按钮的文本
    var text = $(this).text();
    if(text === "info"){
      $(this).text('close');
    } else{
      $(this).text('info');
    }
  });
});

动态加载按钮的补充处理 #

由于你的按钮是通过滑块动态加载的，上述绑定方式可能对后续新增的按钮失效，这时可以改用事件委托确保动态生成的按钮也能触发功能：

$(document).ready(function(){
  // 委托给父容器（建议用更贴近按钮的父元素代替document）
  $(document).on('click', '.infoBtn', function () {
    var text = $(this).text();
    if(text === "info"){
      $(this).text('close');
    } else{
      $(this).text('info');
    }
  });
});

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