JavaScript 函数中的 switch 语句未激活

Question

我正在尝试在函数中使用switch语句，但它没有激活。

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).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>

当我运行上面的代码并单击链接时，"index"的控制台.log运行，但开关块什么也不做。

如果我像下面的示例中那样定义索引变量，则开关有效。 但是当我在函数中输入相同的代码时，开关停止工作。

例：

let index = 3;
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');
}

此示例在控制台中返回"3"和"Portfolio"，这是应该的。

Answer 1

.attr返回一个字符串。(您的手动代码段将index定义为数字，这就是其行为不同的原因(要么根据数字字符串(如'0'(测试cases，要么先将index转换为数字：

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).attr('data-btnIndex');
console.log(typeof index);
thisFunction(Number(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>

Answer 2

<button>vs<a>.我建议您坚持使用锚点进行导航 bcs，这就是它的用途。对于您正在使用dataset属性，它们不是必需的。只需将innerHTML.toLowerCase()用于您的交换机即可。

关于您的问题，您的页面在您的脚本处理.click之前正在导航。

只需将 CSS 类添加到页面 HTML 锚点中的任何内容即可。换句话说，在about.html有<a class="active-page">About</a>.

Answer 3

您的代码完全没问题，但只有一个小问题会阻止正确的输出。您的开关没有停止，它运行良好，但属性data-btnIndex的值的类型是字符串。所以与其写case 0，不如写case '0'，而不是写case 1，你应该写case '1'等等。

或者，您可以通过以下方法将data-btnIndex的值解析为整数：

var index = parseInt(index);

我希望这有所帮助。

谢谢。