带有滑块和百分比显示的jQuery缩放

Question

我正在为我和一些同事制作一个小项目，并在Jquery中制作一个范围滑块以显示在页面上，因为我们无法编辑实际的HTML页面。我制作了一个Range Slider，可以放大div并使其变大，以便“-”或“ +”按钮可以放大和缩小。但是滑块和键的值不同步。

HTML：

<section id="about">
    <div class="container">
      <h4 class="headers">About Me</h4>
      <div class="row">
        <div class="col-sm-2 tryNow">
          <p>Lorem ipsum</p>

          <input type="text" name="amountInput" id="textnumber" min="1" max="5" step="1" value="1" /><span>%</span>
          <input class="zoom-in" type="button" id="plus" value="+" />
          <input class="zoom-out" type="button" id="minus" value="-" />
        </div>
        <div class="col-lg-10 zoom">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

      </div>
    </div>
  </section>


jQuery:

var counter = $("#points").value;
$(document).ready(function() {
  var input = $('<input>', {
    id: 'points',
    type: 'range',
    name: 'amountRange',
    min: 1,
    max: 5,
    value: 1,
    step: 1,
    focusin: function() {
      $(this).val('');
    }
  }).wrap('<div class="zoomContainer"></div>').parent().appendTo('.tryNow');

  // zoom function
  $("#points").on("change", function() {
    $("div.zoom").css({
      "zoom": $(this).val()
    });
  });


      $(".zoom-in").click(function() {

        var newValuePlus = parseInt($("#textnumber").val()) + 1;
        var newZoom = parseInt($('.zoom'))
        if (newValuePlus > 5) return;

        $("#points, #textnumber").val(newValuePlus);

      });


      $(".zoom-out").click(function() {

        var newValueMinus = parseInt($("#textnumber").val()) - 1;
        if (newValueMinus < 1) return;

        $("#points, #textnumber").val(newValueMinus);
      });

      $("#points").change(function() {

        var newValue = Math.floor($(this).val() );
        $("#textnumber").val(newValue);

      });

      $("#textnumber").change(function() {

        var newValue = $(this).val();
        $("#points").val(newValue);

      });


    });

Answer 1

当您通过JS浏览器更改中的值时，未调度事件

您可以将.trigger("change");添加到所有$("#points, #textnumber").val(newValuePlus)，它将起作用。例如$("#points, #textnumber").val(newValuePlus).trigger("change");

演示：https://codepen.io/GTech1256/pen/gOYJOzO

P.S。仅在输入字段失去焦点之后，事件change才会偏离路径。如果要在输入新数字时更改缩放值，请使用$（“＃textnumber”）。on（“ input”）和。trigger（“ input”）