使用switch语句-但计数器永远等于1的情况永远不会使用
[英]using a switch statement - but case where counter equals one never gets used
问题描述
array switch Sample Use the array switch button to toggle through a number of combinations 
阵列开关示例使用阵列开关按钮可切换多种组合
$(document).ready(function() {
var clcks = 0;
$('#cyclStylsArrayCntr').click(function(event){
var curFnt = ['Trebuchet MS', 'Verdana', 'Tahoma', 'Palatino', 'Georgia', 'Times New Roman', 'Arial', 'Courier New'];
var txtClr =['Black', 'Red','Green','Blue','Brown','Aqua','Gold','white','black'];
var curBkC = ['white', 'aqua','brown','yellow','lightGreen','orange','blue','lightBlue','LightSeaGreen']
var msg = ''; // Message
// Arrays are zero based (so 0 is round 1)
// Add 1 to the current round
clcks = (clcks + 1);
if(clcks>=8)clcks=1;
switch (true) {
case clcks == 1:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 2:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 3:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 4:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 5:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "slow");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 6:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 7:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 8:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
}
} );
});
Here is a sample of my file online - the first font selected by the 'array switch' button should be 'Trebuchet MS' but instead it skips to Verdana http://etherealdoorways.com/switchColorFont.html 这是我在线文件的示例-通过“数组切换”按钮选择的第一种字体应该是“ Trebuchet MS”，但它会跳到Verdana http://etherealdoorways.com/switchColorFont.html
5 个解决方案
解决方案1
0 2017-02-23 00:16:21
You've initialized the clcks variable to 0, but it is incremented by 1 upon the first click. 您已将clcks变量初始化为0，但在第一次单击时将其增加1。
The clcks should begin at 0 so that it can be used to access the first element in the arrays. clcks应该从0开始，以便可以用来访问数组中的第一个元素。
Initialize the clcks to 7 instead of 0 on document ready. 准备好文档时，将clcks初始化为7而不是0。 Also, if clcks is equal or larger than 8, it should be reset to 0. 另外，如果clcks等于或大于8，则应将其重置为0。
$(document).ready(function() {
// Initialize to 7, so that the first click will return to 0
var clcks = 7;
$('#cyclStylsArrayCntr').click(function(event){
var curFnt = ['Trebuchet MS', 'Verdana', 'Tahoma', 'Palatino', 'Georgia', 'Times New Roman', 'Arial', 'Courier New'];
var txtClr =['Black', 'Red','Green','Blue','Brown','Aqua','Gold','white','black'];
var curBkC = ['white', 'aqua','brown','yellow','lightGreen','orange','blue','lightBlue','LightSeaGreen']
var msg = ''; // Message
// Arrays are zero based (so 0 is round 1)
// Add 1 to the current round
clcks = (clcks + 1);
// This should be reset to 0, not 1
// Also, change index numbers in switch-case so that clcks is also 0-based
if(clcks>=8)clcks=0;
switch (true) {
case clcks == 0:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 1:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 2:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 3:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 4:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "slow");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 5:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 6:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
case clcks == 7:
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: '34px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
break;
}
} );
});
解决方案2
0 2017-02-23 00:23:24
The switch statement is formatted incorrectly. switch语句的格式不正确。 You need to put your expression on the switch and the values on the case like so: 您需要将表达式放在开关上，值放在大小写上，如下所示：
switch(clcks) {
case 1:
:
break;
case 2:
:
break;
:
}
解决方案3
0 2017-02-23 00:36:39
Switch case needs an expression to compare against the cases. 切换案例需要一个表达式来与案例进行比较。 But you dont really need it either. 但是您也确实不需要它。
It goes straight to Verdana cos you're adding 1 to clcks before executing the code (in JS, array index starts from 0). 它直接作用于Verdana cos，您在执行代码之前向clcks加1（在JS中，数组索引从0开始）。
Here's what I think you need (untested code): 这是我认为您需要的（未经测试的代码）：
$(document).ready(function() {
// Declare all variables outside of the on click
var clcks = 0;
var curFnt = ['Trebuchet MS', 'Verdana', 'Tahoma', 'Palatino', 'Georgia', 'Times New Roman', 'Arial', 'Courier New'];
var txtClr =['Black', 'Red','Green','Blue','Brown','Aqua','Gold','white','black'];
var curBkC = ['white', 'aqua','brown','yellow','lightGreen','orange','blue','lightBlue','LightSeaGreen']
var msg = '';
$('#cyclStylsArrayCntr').click(function(event){
if( clcks >= 8 ) clcks = 1;
$(".sample2").css({
'background-color' : curBkC[clcks],
'font-family' : curFnt[clcks],
'color' : txtClr[clcks]
});
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").animate({fontSize: '38px'}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast"); // Not sure why you have 2 of these
$("#currFont").html(curFnt[clcks]);
clcks = (clcks + 1); // Put after executing your on click code
});
});
Also, try to make your variable names readable so if you're collaborating with others they can understand what each one represents straight away. 另外，请尝试使变量名可读，以便与他人协作时，变量名可以立即理解每个变量代表什么。
解决方案4
0 2017-02-23 00:40:48
You don't need a switch statement at all (apart from that it is is written the wrong way) 您根本不需要switch语句（除此之外，它是以错误的方式编写的）
The first time the function is called, clcks in incremented to 1, which means that the array elements at index 1 are read instead of the elements at index 0. 第一次调用该函数时， clcks递增为1，这意味着将读取索引1处的数组元素，而不是索引0处的元素。
Here's a better, working solution: 这是一个更好的可行解决方案：
$(document).ready(function() {
var curFnt = ['Trebuchet MS', 'Verdana', 'Tahoma', 'Palatino', 'Georgia', 'Times New Roman', 'Arial', 'Courier New'];
var fontSizes = ["38px", "34px", "38px", "34px", "38px", "34px", "38px", "34px"];
var txtClr = ['Black', 'Red', 'Green', 'Blue', 'Brown', 'Aqua', 'Gold', 'white', 'black'];
var curBkC = ['white', 'aqua', 'brown', 'yellow', 'lightGreen', 'orange', 'blue', 'lightBlue', 'LightSeaGreen'];
var clcks = 0;
$('#cyclStylsArrayCntr').click(function(event){
var msg = '';
// clcks is incremented at the end of the function
// -> clcks is 0 at the first time
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: fontSizes[clcks]}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
clcks = clcks + 1;
if (clcks >= 8) clcks = 1;
});
});
解决方案5
0 2017-02-23 16:33:13
This is the solution I will use: 这是我将使用的解决方案：
$(document).ready(function() {
var curFnt = ['Trebuchet MS', 'Verdana', 'Tahoma', 'Palatino', 'Georgia', 'Times New Roman', 'Arial', 'Courier New'];
var fontSizes = ["38px", "34px", "38px", "34px", "38px", "34px", "38px", "34px"];
var txtClr = ['Black', 'Red', 'Green', 'Blue', 'Brown', 'Aqua', 'Gold', 'white', 'black'];
var curBkC = ['white', 'aqua', 'brown', 'yellow', 'lightGreen', 'orange', 'blue', 'lightBlue', 'LightSeaGreen'];
var clcks = 0;
$('#cyclStylsArrayCntr').click(function(event){
var msg = '';
// clcks is incremented at the end of the function
// -> clcks is 0 at the first time
$(".sample2").css('background-color', curBkC[clcks]);
$(".sample2").css("font-family", curFnt[clcks]);
$("#currFont").css("font-family", curFnt[clcks]);
$(".sample2").css("color", txtClr[clcks]);
$(".sample2").animate({fontSize: fontSizes[clcks]}, "fast");
$(".sample2").animate({fontSize: '36px'}, "fast");
$("#currFont").html(curFnt[clcks]);
clcks = clcks + 1;
if (clcks >= 8) clcks = 0;
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用if语句或函数作为切换条件 - using an if statement or function as a switch case
innerHTML切换案例计数器 - innerHTML switch case counter
Javascript-从一个switch语句案例转到另一个switch语句 - Javascript - Going from one switch statement case to a different switch statement
switch case语句基于许多类之一 - switch case statement based one of many classes
Javascript 等于在 if 语句中突出显示 - Javascript Equals to gets highlighted in if statement
在这里使用switch / case语句可行吗 - Is using a switch/case statement feasible here
switch 语句中每个 case 语句的紧凑单行代码 - JavaScript - Compact one-liner for each case statement in a switch statement - JavaScript
Javascript切换案例：使用个别方法评估案例陈述 - Javascript switch-case: using individual methods to evaluate a case statement
switch语句中的常见情况 - Common case in switch statement
switch语句，不执行任何情况 - Switch statement, no case is executed
相关标签