Question

我正在尝试使用以下switch语句来更改全局变量，但它只会更改一次。

HTML

<button type="button" value =15>16x16</button>
<button type="button" value =31>32x32</button>
<button type="button" value =63>64x64</button>

的JavaScript

 var initial_size = 15;
 var $cl;
 var $size;

 $(document).ready(function(){
   populate(initial_size);
 });

function populate(size){
   $('.main-table').empty();
   $size = size;
   switch($size){
    case 15:
        $cl = 'box';
        break;
    case 31:
         $cl = 'bigger-box';
         console.log("case 31");
        break;
    case 63:
         $cl = 'biggest-box';
         console.log("case 63");
         break;
    default:
        break;
    }

    console.log($cl);

    for(var i=0; i < $size; i++){
       $tr = $("<tr></tr>");
       for(var j=0; j < $size; j++){
           $div = $("<div class=" +$cl+"></div>");
           $div.css('background-color', 'lightslategrey');
           $tr.append($("<td></td>").append($div));
        }
       $(".main-table").append($tr);
     } 
   run();
};

 function run(){
     $('.box').hover(function(){
       $(this).css('background-color', 'black');
     });

     $('button').click(function(){
        console.log($(this).val());
        populate($(this).val());
     });
  };

因此，当我运行我的代码时，$ cl将被设置为'box'，但每当我点击另一个按钮并且循环再次运行时，$ cl不会更改为任何其他类。我是否使用了switch语句错误，或者我没有正确解析该值，或者是因为我使用的是全局变量？我使用全局变量的唯一原因是因为我不太熟悉javascript中的作用域如何工作，所以我认为这种方式可能更容易。

Answer 1

我是否使用了switch语句错误，或者我没有正确解析该值？

正是这样。按钮的值是字符串，但您的switch语句对数字有效。 case语句使用包含类型的严格相等。因此要么将值解析为数字，要么在您的情况下使用字符串文字。目前，您的代码将始终达到default案例。

我使用全局变量的唯一原因是因为我不太熟悉javascript中的作用域如何工作，所以我认为这种方式可能更容易。

实际上非常简单：所有函数声明，参数声明和var声明都限定在包含它们的函数中。你真的应该在这里使用局部变量。

顺便说一下，你真的应该将run(); populate调用从populate(initial_size);移到rect旁边的文档就绪回调中。目前，每次单击按钮时都会附加一组新的事件侦听器，所有这些侦听器都会在每次单击时触发。

为什么我的变量不变？

1 个答案: