Javascript 基于keyup触发器css的jquery

我很难让这个简短的脚本正常工作。我想通过获取输入元素的值来设置

div

的

宽度和
高度

<input id="width" type="number" class="num" />
<input id="height" type="number" class="num" />
<br />
<br />
<div>
</div>

var w = +$('#width').val();
var h = +$('#height').val();

var width = w * 10;
var height = h * 10;

$('.num').keyup(function(){
$('div').css({
    'width' : width,
    'height' : height
});
});






var w=+$（'#width'）.val（）；
var h=+$（'#height'）.val（）；
可变宽度=w*10；
var高度=h*10；
$（'.num'）.keyup（函数（）{
$（'div'）.css({
“宽度”：宽度，
“高度”：高度
});
});


我如何才能让它工作？
这里有一个快速版本，您可以开始使用它，它只调整宽度。一旦你开始工作，再增加高度

$('#width').keyup(function(){
  var w = $(this).val() * 10;
  $('div').css('width',w);
});

更新小提琴：

您需要在人员改变时获取val，他们按照您的编码方式，它在脚本运行时获取宽度和高度的值，并且永远不会改变。
将变量移动到处理程序中。当您单击
input=number
上的箭头时，它不起作用。因此，烦人的是，你可以为点击事件@JosanIracheta添加相同的代码，它修复了你的箭头问题。我将其切换为
change
，这对箭头和按键有效。
$('.num').keyup(function(e){
 var w = +$('#width').val();
 var h = +$('#height').val();
 var width = w * 10;
 var height = h * 10;
if(width!=0)
{
$('div').css(
    'width' , width+"px"

)
}
  if(height!=0)
 {
  $('div').css('height',height+'px');
 }
 });

$('.num').keyup(function(e){
 var w = +$('#width').val();
 var h = +$('#height').val();
 var width = w * 10;
 var height = h * 10;
if(width!=0)
{
$('div').css(
    'width' , width+"px"

)
}
  if(height!=0)
 {
  $('div').css('height',height+'px');
 }
 });