如何使用jQuery/JavaScript调整p标签整体字体大小并修复点击计数异常

现有代码的核心问题 #

• 重复绑定事件：你同时给按钮加了行内onclick属性，又在触发的函数里用jQuery的click()再绑定一次回调，每点击一次按钮就会多绑定一次事件，所以后续点击会多次触发回调，控制台日志数量自然累加。
• 取值错误：document.getElementsByTagName('p')返回的是所有p元素的DOM集合，不是字体大小数值，直接对这个变量做加减运算没有任何意义。
• 没有修改元素样式：就算你算对了字体大小，也没有把值赋值给p元素的font-size样式，页面自然不会有变化。

修正方案 #

直接去掉行内的onclick绑定，统一用jQuery绑定事件，每次点击的时候读取当前p的字体大小，加减之后重新赋值即可。

修正后的JS代码：

// 页面加载完成后绑定事件，无需再加行内onclick
$(function() {
  // 字体放大逻辑
  $('#font-up').click(function() {
    console.log('font-up clicked');
    $('p').each(function() {
      // 读取当前字体大小转成数字，默认取16px兜底
      let currentSize = parseFloat($(this).css('font-size')) || 16;
      // 每次放大2px，步长可以自行调整
      $(this).css('font-size', currentSize + 2 + 'px');
    });
  });

  // 字体缩小逻辑
  $('#font-dn').click(function() {
    console.log('font-down clicked');
    $('p').each(function() {
      let currentSize = parseFloat($(this).css('font-size')) || 16;
      // 最小限制到12px，避免字体太小无法阅读
      if (currentSize > 12) {
        $(this).css('font-size', currentSize - 2 + 'px');
      }
    });
  });
})

需要修改的HTML部分：

把两个按钮的行内onclick属性删除即可，修改后的按钮代码如下：

<button id="font-up">Font Up</button>
<button id="font-dn">Font Down</button>

内容的提问来源于stack exchange，提问作者Jake