使用jQuery调整文本大小？

Question

我找到了一种使用jQuery调整文本大小的绝佳解决方案： http : //dev-tips.com/featured/jquery-tip-quick-and-easy-font-resizing

像魅力一样工作，但我缺少它们三件事。

A.）“返回默认”点击功能选项。 B.）调整大小的限制（即只允许将其调整大小两次C.）将多个元素添加到可调整大小的区域

这是我在上面的示例中修改的代码：

 $(document).ready(function() {
  //Text Zoom 
  $('.controls a').click(function(){
    var ourText = $('#content');
 var currFontSize = ourText.css('fontSize');
 var finalNum = parseFloat(currFontSize, 10);
 var stringEnding = currFontSize.slice(-2);
   if(this.id == 'large') {
     finalNum *= 1.2;
  }
  else if (this.id == 'small'){
    finalNum /=1.2;
    }
   ourText.css('fontSize', finalNum + stringEnding);
 });
   });

减去这3个问题，效果很好。 我知道“ C”。 不应该那么难，但是我对jQuery语法还不够熟悉，以添加更多要重新调整大小的元素，而不仅仅是'#content'。 不确定如何处理其他2。控件的标记如下所示，从我的JS中可以看到，小型和大型链接通常以“ $（'。controls a'）。click（function（））为目标{”。

<ul id="textzoom">
<li class="controls">
  <a href="#" id="small" class="smaller" title="zoom out">-</a> 
  <a href="#" class="normal" id="orignal" title="zoom normal">AAA</a> 
  <a href="#" id="large" class="bigger" title="zoom in">+</a> 
</li>
<li>...</li>
</ul>

任何帮助将不胜感激。

Answer 1

对于A）和B），您需要将信息存储在全局变量（在函数范围之外定义的变量）中。 只需创建一个“ baseFontSize”变量来存储您的重置字体大小，然后创建一个“ fontSizeDelta”变量即可检查，以确保它不会超过“ 2”或低于“ -2”。 您可以在.click函数内添加一个针对fontSizeDelta的检查（如果返回的是最大或最小，则立即调用return），并根据需要对其进行递增或递减操作。 如果我了解您对“ C”的要求，则只需执行以下操作：

ourText.css('fontSize', finalNum + stringEnding);

重复，但将“ ourText”替换为“ $（'＃desired_element_id'）”，其中，required_element_id是要影响的元素的ID。

有帮助吗？