使用 If 语句切换大小写 - Javascript & Jquery

Question

此代码有什么问题？它应该捕获#ts_containerdiv中的所有点击，这些点击要么是按钮，要么是锚点。它还应该捕获按键事件。

我试图在每个案例中应用If语句，以确定是否按下和/或单击，如果是，它会将新的div名称重写到开关案例底部的表达式中，然后当前文本将淡出，新文本将淡入。正如现在所写的，当你点击时，它仍然可以正常工作，但我无法在按键事件时触发它，我也不确定我做错了什么。

jQuery(document).ready(function($) {
$('#ts_container').on('click keypress', 'button, a', function(e) {
var id = $(this).attr("id");
var fade_out;
var fade_in;
switch (id) {
case 'start':
if ((e.type === 'keypress' && e.which === 13) || (e.type == 'click')) {
fade_out = '#start_1';
fade_in = '#step_0';
}
break;
case 'AC':
if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click')) {
fade_out = '#step_0';
fade_in = '#step_AC_1';
}
break;
case 'step_AC_Continue_1':
if ((e.type === 'keypress' && e.which === 13) ||
(e.type == 'click')) {
fade_out = '#step_AC_1';
fade_in = '#step_AC_2';
}
break;
case 'Step_0_Option_1':
if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click')) {
fade_out = '#step_0';
fade_in = '#step_Heat_1';
}
break;
case 'step_AC_Option_1':
if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click')) {
fade_out = '#step_AC_2';
fade_in = '#step_AC_3';
}
break;
case 'step_AC_Option_2':
if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click')) {
fade_out = '#step_AC_2';
fade_in = '#step_AC_solution_electrical';
}
break;
case 'step_AC_Option_3':
if ((e.type === 'keypress' && e.which === 51 || e.which === 99) || (e.type == 'click')) {
fade_out = '#step_AC_2';
fade_in = '#step_AC_circuit_breaker';
}
default:
fade_out = '#start_1';
fade_in = '#step_0';
}
$(fade_out).fadeTo('fast', 0).css('visibility', 'hidden')
.css('display', 'none');
$(fade_in).delay(800).css('visibility', 'visible')
.css('display', 'block').fadeTo('slow', 1);
});
});

Answer 1

大多数if语句中的括号都不正确：

if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 49 || e.which === 97) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 50 || e.which === 98) || (e.type == 'click'))
if ((e.type === 'keypress' && e.which === 51 || e.which === 99) || (e.type == 'click')) 

&&优先于||，因此最终为：

if (((e.type === 'keypress' && e.which === x) || e.which === y) || (e.type == 'click')) 

将其更改为：

if (e.type === 'keypress' && (e.which === x || e.which === y) || e.type == 'click') 

翻译过来就是：

• 它必须是代码为x或y的keypress，or
• 这是一个点击事件

---

您还在button和a元素上注册事件处理程序：

.on('click keypress', 'button, a'

这些通常不会听键盘事件，除非你已经专注于"。

一个修复方法是单独声明函数，并像这样注册处理程序：

function handleEvent(e) {
// Do stuf
}
$('#ts_container').on('click', 'button, a', handleEvent);
$(window).on('keypress', handleEvent);