javascript - 如何使用 JQuery 设置多组 .on() 输入 slider 的输出目标？

Question

我有两组输入 slider ，每组都有一个目标 div。我试图使代码尽可能灵活，以适应额外的 slider 组。

我遇到的问题是，以下代码仅在调整第一组输入和目标时才能完美运行...对于第二组输入和相应的目标，它会失败。

检查控制台时，我注意到所有输入值信息和正确的目标都被记录下来，并且它似乎只应用了一个初始输入更改，但随后停止了。

$(".slider").on("input", function() {
  var wght = $(".weightSlider").val();
  var opsz = $(".opticalSlider").val();
  var settings = "'wght' " + wght + ",'opsz' " + opsz;

  var target = $(this).closest("article").siblings(".target")
  $(target).css("font-variation-settings", settings);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <article>
       <div class="controls">
         <label for="name">Font-size:</label>
         <input class="slider sizeSlider" type="range" min="10" max="200" value="48">

         <label for="name">Weight:</label>
         <input class="slider weightSlider test" type="range" min="0" max="1000" value="0">

         <label for="name">Optical Size:</label>
         <input class="slider opticalSlider" type="range" min="0" max="100" value="0">

       </div>
    </article>
    <div class="target"></div>
</section>

<section>
    <article>
       <div class="controls">
         <label for="name">Font-size:</label>
         <input class="slider sizeSlider" type="range" min="10" max="200" value="48">

         <label for="name">Weight:</label>
         <input class="slider weightSlider test" type="range" min="0" max="1000" value="0">

         <label for="name">Optical Size:</label>
         <input class="slider opticalSlider" type="range" min="0" max="100" value="0">

       </div>
    </article>
    <div class="target"></div>
</section>

我认为这是我如何使用 .closest() 和 .siblings() 选择目标的问题...但我不明白的是，这适用于第一个目标，但不适用于另一个目标。

这也可能是 .val() 未设置新输入值的问题。

知道问题出在哪里吗？

Answer 1

我已经修复了你的代码。

$(".slider").on("input", function() {

  var wght = $(this).closest(".controls").find(".weightSlider").val();
  var opsz = $(this).closest(".controls").find(".opticalSlider").val();
  var settings = "'wght' " + wght + ",'opsz' " + opsz;

  var target = $(this).closest("section").find(".target")
  $(target).css("font-variation-settings", settings);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <article>
       <div class="controls">
         <label for="name">Font-size:</label>
         <input class="slider sizeSlider" type="range" min="10" max="200" value="48">

         <label for="name">Weight:</label>
         <input id="weightSlider"  class="slider weightSlider test" type="range" min="0" max="1000" value="0">

         <label for="name">Optical Size:</label>
         <input id="opticalSlider" class="slider opticalSlider" type="range" min="0" max="100" value="0">
         <span class="slider-value"></span>

       </div>
    </article>
    <div class="target"></div>
</section>

<section>
    <article>
       <div class="controls">
         <label for="name">Font-size:</label>
         <input class="slider sizeSlider" type="range" min="10" max="200" value="48">

         <label for="name">Weight:</label>
         <input class="slider weightSlider test" type="range" min="0" max="1000" value="0">

         <label for="name">Optical Size:</label>
         <input class="slider opticalSlider" type="range" min="0" max="100" value="0">

       </div>
    </article>
    <div class="target"></div>
</section>