jquery - 将文本放大三倍并恢复到初始大小

Question

我有 link 和 div 元素。单击链接后，我想放大 div 内的文本。可以将文本放大三次，第四次大小必须恢复到初始大小

$('.bigger').click(function () {
  ('#outer-wrap').on('click', function () {
    $(this).css("font-size", "115%")
  });
})

<a class="bigger" href="#">Some text</a>


<div id="outer-wrap">paragraph</div>

现在我有类似的东西。有谁能够帮助我？

Answer 1

为此，您不需要将单击事件处理程序添加到外包装。相反，保留所需大小的数组和当前点击次数的变量，并根据点击链接的次数更改大小。

var sizes = ["100%","115%","130%","145%"];
var count = 1;

$('.bigger').click(function () {
  $('#outer-wrap').css("font-size", sizes[count]);
  count = (count+1) % 4;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="bigger" href="#">Some text</a>


<div id="outer-wrap">paragraph</div>