堆栈内存溢出
  繁体   English   中英

使用switch语句-但计数器永远等于1的情况永远不会使用

[英]using a switch statement - but case where counter equals one never gets used

 原文  2017-02-22 23:57:30  3   5    javascript/ jquery/ switch-statement/ counter

问题描述

阵列开关示例使用阵列开关按钮可切换多种组合 

$(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; 
                            }


  } );

      });

这是我在线文件的示例-通过“数组切换”按钮选择的第一种字体应该是“ Trebuchet MS”，但它会跳到Verdana http://etherealdoorways.com/switchColorFont.html

5 个解决方案

解决方案1
 0  2017-02-23 00:16:21

您已将clcks变量初始化为0，但在第一次单击时将其增加1。

clcks应该从0开始，以便可以用来访问数组中的第一个元素。

准备好文档时，将clcks初始化为7而不是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

switch语句的格式不正确。 您需要将表达式放在开关上，值放在大小写上，如下所示： 

switch(clcks) {
  case 1:
     : 
    break;
  case 2:
     :
    break;
  :
}

解决方案3
 0  2017-02-23 00:36:39

切换案例需要一个表达式来与案例进行比较。 但是您也确实不需要它。

它直接作用于Verdana cos，您在执行代码之前向clcks加1（在JS中，数组索引从0开始）。

这是我认为您需要的（未经测试的代码）： 

$(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

     });
});

另外，请尝试使变量名可读，以便与他人协作时，变量名可以立即理解每个变量代表什么。

解决方案4
 0  2017-02-23 00:40:48

您根本不需要switch语句（除此之外，它是以错误的方式编写的）

第一次调用该函数时， clcks递增为1，这意味着将读取索引1处的数组元素，而不是索引0处的元素。

这是一个更好的可行解决方案： 

$(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

这是我将使用的解决方案： 

    $(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语句或函数作为切换条件 innerHTML切换案例计数器 Javascript-从一个switch语句案例转到另一个switch语句 switch case语句基于许多类之一 Javascript 等于在 if 语句中突出显示 在这里使用switch / case语句可行吗 switch 语句中每个 case 语句的紧凑单行代码 - JavaScript Javascript切换案例：使用个别方法评估案例陈述 switch语句中的常见情况 switch语句，不执行任何情况
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM