带有滑块和百分比显示的 Jquery 缩放答案

【问题标题】：Jquery Zoom with slider and percentage display带有滑块和百分比显示的 Jquery 缩放
【发布时间】：2019-09-27 20:14:32
【问题描述】：

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

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);

      });


    });

【问题讨论】：

标签： jquery slider range zooming

【解决方案1】：

当你通过 JS 浏览器更改中的值时，不会调度事件

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

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

附：事件 change 仅在输入字段失去焦点后才发生dispath。如果您想在输入新数字时更改 缩放值，请使用 $("#textnumber").on("input") 和 .trigger("input" )

【讨论】：