Javascript 为什么不是'；我的变量没有变化吗？

我试图使用下面的switch语句来更改全局变量，但它只会更改一次

HTML

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

16x16
32x32
64x64

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

var初始大小=15；
var$cl；
var$大小；
$（文档）.ready（函数（）{
填充（初始大小）；
});
函数填充（大小）{
$（'.main table'）.empty（）；
$size=size；
交换机（$大小）{
案例15：
$cl=‘盒子’；
打破
案例31：
$cl=‘大盒子’；
控制台日志（“案例31”）；
打破
案例63：
$cl=‘最大的盒子’；
控制台日志（“案例63”）；
打破
违约：
打破
}
控制台日志（$cl）；
对于（变量i=0；i<$size；i++）{
$tr=$（“”）；
对于（变量j=0；j<$size；j++）{
$div=$（“”）；
$div.css（'background-color'，'lightslategrey'）；
$tr.append（$（“”）.append（$div））；
}
$（“.main table”）.append（$tr）；
} 
run（）；
};
函数运行（）{
$（'.box'）.hover（函数（）{
$（this.css（'background-color'，'black'）；
});
$（“按钮”）。单击（函数（）{
log（$（this.val（））；
填充（$（this.val（））；
});
};

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

我使用的switch语句是错误的，还是没有正确解析值

就是这个。按钮的值是字符串，但您的

switch

语句是对数字进行操作的<代码>大小写语句使用包含类型的严格相等。因此，要么将值解析为数字，要么在案例中使用字符串文字。当前，您的代码将始终达到默认值

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

实际上相当简单：所有函数声明、参数声明和

var

声明的作用域都是包含它们的函数。你真的应该在这里使用局部变量

---

顺便说一句，你真的应该移动

run（）调用从
populate
进入文档就绪回调，位于
populate（初始大小）旁边。当前，每次单击按钮时，您都会附加一组新的事件侦听器，所有这些侦听器都会在每次单击时启动。
您发布的代码不完整，但从您发布的内容来看，您并没有实际运行
run（）
函数来设置事件处理程序。另外，您还没有用右括号关闭
run（）函数
}`尝试在jsfiddle.net上创建一个fiddle并链接到问题中的fiddle。您也没有关闭填充函数。最后一个右括号与switch语句语法错误有关！！：哦，对不起。run函数在我的实际文件中是关闭的，在我发布它时括号丢失了