如何实现多input range滑块独立控制对应类的字体样式？

问题根源 #

你当前的代码存在两个核心问题：

• document.querySelector('input')每次只会选中页面第一个input元素，导致所有事件监听都绑定到了第一个滑块上，其他滑块完全失效。
• HTML中所有input使用了同一个id="slider"，这违反了HTML规范——id在页面中必须唯一，浏览器只会识别第一个带该id的元素。

解决方案一：利用DOM层级关系（推荐，便于后续扩展） #

先调整HTML结构，把每组「标签+滑块+文本」包裹在独立容器中，这样可以通过DOM关系快速找到对应文本：

<div class="container">
  <header>
    <!-- 每组控件单独包裹 -->
    <div class="font-control-group">
      <label>调整字体大小</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" />
      <p class="font_1">Some text that should dynamically change size.</p>
    </div>
    <div class="font-control-group">
      <label>调整字体大小</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" />
      <p class="font_2">Some text that should dynamically change size.</p>
    </div>
    <div class="font-control-group">
      <label>调整字体大小</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" />
      <p class="font_3">Some text that should dynamically change size.</p>
    </div>
    <div class="font-control-group">
      <label>调整字体大小</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" />
      <p class="font_4">Some text that should dynamically change size.</p>
    </div>
    <div class="font-control-group">
      <label>调整字体大小</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" />
      <p class="font_5">Some text that should dynamically change size.</p>
    </div>
  </header>
</div>

然后使用事件委托，只给父元素绑定一次事件，高效处理所有滑块的输入：

// 给所有滑块的父容器绑定事件
document.querySelector('header').addEventListener('input', (e) => {
  // 只处理range类型的input
  if (e.target.type !== 'range') return;
  
  // 找到当前滑块所在组的文本元素
  const targetText = e.target.closest('.font-control-group').querySelector('p');
  // 设置字体大小
  targetText.style.fontSize = `${e.target.value}em`;
});

这种方式的优势：后续新增任意多组控件，都不需要修改JS代码，扩展性极强。

解决方案二：用data属性指定目标元素（灵活适配现有结构） #

如果不想大幅修改HTML，可以给每个滑块添加data-target属性，明确指定要控制的文本类名：

<div class="container">
  <header>
    <label>调整字体大小</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" data-target=".font_1" />
    <p class="font_1">Some text that should dynamically change size.</p>
    
    <label>调整字体大小</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" data-target=".font_2" />
    <p class="font_2">Some text that should dynamically change size.</p>
    
    <label>调整字体大小</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" data-target=".font_3" />
    <p class="font_3">Some text that should dynamically change size.</p>
    
    <label>调整字体大小</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" data-target=".font_4" />
    <p class="font_4">Some text that should dynamically change size.</p>
    
    <label>调整字体大小</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" data-target=".font_5" />
    <p class="font_5">Some text that should dynamically change size.</p>
  </header>
</div>

然后循环所有滑块绑定事件：

// 获取所有range滑块
const sliders = document.querySelectorAll('input[type="range"]');

sliders.forEach(slider => {
  slider.addEventListener('input', (e) => {
    // 从data-target获取目标元素选择器
    const targetSelector = e.target.dataset.target;
    const targetText = document.querySelector(targetSelector);
    // 设置字体大小
    targetText.style.fontSize = `${e.target.value}em`;
  });
});

后续扩展建议（字间距、行高） #

如果要添加字间距、行高等控制，只需要给滑块新增data-property属性，扩展JS逻辑即可：
比如新增字间距滑块：

<div class="font-control-group">
  <label>调整字间距</label>
  <input type="range" value="0" min="-0.2" max="0.5" step="0.01" data-property="letterSpacing" />
  <p class="font_1">Some text that should dynamically change spacing.</p>
</div>

修改JS代码，支持多属性控制：

document.querySelector('header').addEventListener('input', (e) => {
  if (e.target.type !== 'range') return;
  
  const group = e.target.closest('.font-control-group');
  const targetText = group.querySelector('p');
  // 默认控制字体大小，可通过data-property指定其他属性
  const property = e.target.dataset.property || 'fontSize';
  // 根据属性设置对应单位
  const unit = ['fontSize', 'letterSpacing', 'lineHeight'].includes(property) ? 'em' : '';
  
  targetText.style[property] = `${e.target.value}${unit}`;
});

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