Question

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

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


  } );

      });

以下是我的在线文件示例 - ＆＃39;阵列开关选择的第一个字体＆＃39;按钮应该是'Trebuchet MS＆＃39;但相反，它会跳到Verdana http://etherealdoorways.com/switchColorFont.html

Answer 1

您已将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; 
                            }


  } );

      });

Answer 2

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

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

Answer 3

Switch case需要一个表达式来与案例进行比较。但你也不需要它。

直接进入Verdana，因为你在执行代码之前向clcks添加1（在JS中，数组索引从0开始）。

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

a = [[1,2], [3,4]]
a.each do |i|
  b= i.inspect
  puts a.include?(b)
end

此外，尝试使您的变量名称可读，因此如果您与其他人合作，他们可以立即了解每个变量名称。

Answer 4

你根本不需要一个switch语句（除此之外是错误的写法）

第一次调用函数时，queryResultHrefLink='<a href="https://en.wikipedia.org/?curid='+prefixSearchResults.query.prefixsearch[i].pageid+'">'+prefixSearchResults.query.prefixsearch[i].title+'</a><br>'+prefixSearchResults;递增为1，这意味着读取索引1处的数组元素而不是索引0处的元素。

这是一个更好的，有效的解决方案：

clcks

Answer 5

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

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

使用switch语句 - 但是计数器等于一个永远不会被使用的情况

5 个答案: