如何从普通的javascript代码写入Closure Javascript?

时间:2017-02-02 05:40:34

标签: javascript closures

我正在创建一个Web应用程序,我希望用户增加/减少文本大小。我需要做的就是更改此代码以使用闭包。

var $button = $("p");  
$button.each( function(){
var $this = $(this);
$this.css("font-size");
});

$("#larger").click(function(){
fontSize (1);
})

$("#smaller").click(function(){
 fontSize (-1);
})

function fontSize(right){
$button.each( function(){
    var $this = $(this);
    $this.css( "font-size" , parseInt($this.css("font-size")) + right);
});
}
  

这是我的封闭部分。谁能告诉我这是否正确?

 var $button = $("p");
 $button.each(function() {
 $(this).css("font-size");
});
$("#larger").click(function() {
 fontSize(1);
 });
  $("#smaller").click(function() {
  fontSize(-1);
  });
  function fontSize(b) {
  $button.each(function() {
  var a = $(this);
   a.css("font-size", parseInt(a.css("font-size")) + b);
  });
  }

1 个答案:

答案 0 :(得分:0)

<强> TLDR: Mozilla有很棒的教程here

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}
<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

这个问题有点模糊,但是,如果问题是关于Javascript闭包那么我建议this。这是Mozilla关于闭包的官方指南,它有一个确切的例子可以提供你的答案。