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。 event change 仅在输入字段失去焦点后才发送。如果您想在输入新数字时更改 缩放值 ，请使用 $("#textnumber").on("input") 和 .trigger("input")

Jquery 缩放滑块和百分比显示

Jquery Zoom with slider and percentage display

jquery

slider

range

zooming