Question

我有链接和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

为此，您不需要在外部包装上添加on click事件处理程序。而是保留所需大小的数组和当前点击次数的变量，并根据点击链接的次数更改大小。

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>

Answer 2

尝试

this.revalidate();  // redo the layout and notify the parent 
this.repaint();     // redraw the updated state

http://jsfiddle.net/svArtist/4hor9p6b/

从0到3循环显示i，并使用该数字增加缩放级别（100％，115％，130％，145％）。

这使它非常优雅，也更有动态（你可以改变模数后面的4而不必改变其他任何东西来改变步数，增量中的15改变字体的数量每次点击放大。）

放大文本三次并返回初始大小

2 个答案: