jquery - jQuery：如何为不同的设置使用一个功能？

Question

这是我的代码：

$('#font_one .font_size, #font_two .font_size').on('input', function() {
  var fontsizeval = $(this).val();
  var fontsizemin = $(this).attr('min');
  var fontsizemax = $(this).attr('max');
  $('#font_one .text, #font_two .text').css("font-size", fontsizeval + "px");
});

* {
  font-size: 12px;
}

.text {
  font-size: 20px;
  font-family: sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="font_one">
  Font Size:
  <input class="font_size" type="range" value="20" min="10" max="50">
  <div class="text">Text</div>
</div>

<div id="font_two">
  Font Size:
  <input class="font_size" type="range" value="20" min="10" max="50">
  <div class="text">Text</div>
</div>

最后我必须添加很多字体。所有字体都应该可以单独调整。最好只有一个全局函数，而不是为每种字体编写相同的代码行。有没有办法做到这一点？也许有变量？范围滑块和文本区域最终不会在一个 div 中，因此不应使用.siblings().

将非常感谢您的帮助！:)

标签： jquery

Answer 1

使用属性将滑块与其应控制的相应 DIV 相关联。

$('.font_size').on('input', function() {
  var fontsizeval = $(this).val();
  var fontsizemin = $(this).attr('min');
  var fontsizemax = $(this).attr('max');
  var div = $("#" + $(this).data("rel"));
  div.css("font-size", fontsizeval + "px");
});

* {
  font-size: 12px;
}

.text {
  font-size: 20px;
  font-family: sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="font_one">
  Font Size:
  <input class="font_size" type="range" value="20" min="10" max="50" data-rel="text1">
</div>

<div id="font_two">
  Font Size:
  <input class="font_size" type="range" value="20" min="10" max="50" data-rel="text2">
</div>

<div class="text" id="text1">Text</div>
<div class="text" id="text2">Text</div>