JavaScript函数中Switch语句未触发问题求助

嘿，我一眼就看出问题所在了——这是个典型的类型不匹配坑！

问题根源 #

你通过$(this).attr('data-btnIndex')获取到的index是字符串类型（比如点击Portfolio链接时，拿到的是"3"而不是数字3），但你的switch语句里的case都是数字类型。JavaScript的switch是用**严格相等（===）**来匹配的，字符串和数字类型不相等，所以自然不会触发任何case分支，只会走default（如果有的话）。而你直接定义let index = 3时，变量是数字类型，所以能正常匹配。

解决方法 #

有几种方式可以把字符串转成数字，最推荐的是用jQuery的data()方法，它会自动识别data属性里的数值类型：

方法1：使用data()自动转换类型

$('nav ul li a').click(function() {
  // data()会自动把data-btnIndex的字符串转成数字
  let index = $(this).data('btnIndex');
  thisFunction(index);
});

方法2：手动转换类型（parseInt/Number）

如果坚持用attr()，可以手动把字符串转成数字：

$('nav ul li a').click(function() {
  // 用parseInt转换，第二个参数10是指定十进制
  let index = parseInt($(this).attr('data-btnIndex'), 10);
  // 或者用Number()转换：let index = Number($(this).attr('data-btnIndex'));
  thisFunction(index);
});

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="#" data-btnIndex="0">Home</a>
    </li>
    <li>
      <a href="#" data-btnIndex="1">About Us</a>
    </li>
    <li>
      <a href="#" data-btnIndex="2">Services</a>
    </li>
    <li>
      <a href="#" data-btnIndex="3">Portfolio</a>
    </li>
    <li>
      <a href="#" data-btnIndex="4">Contact</a>
    </li>
  </ul>
</nav>

<script>
let thisFunction = function(index) {
  console.log(index);
  switch (index) {
    case 0:
      console.log('Home');
      break;
    case 1:
      console.log('About');
      break;
    case 2:
      console.log('Services');
      break;
    case 3:
      console.log('Portfolio');
      break;
    case 4:
      console.log('Contact');
      break;
    default:
      console.log('Default');
  }
};

$('nav ul li a').click(function() {
  let index = $(this).data('btnIndex');
  thisFunction(index);
});
</script>

这样修改后，再点击导航链接，index就是数字类型了，switch语句就能正常触发对应的分支啦！

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