Jquery Zoom с ползунком и процентным дисплеем - PullRequest
Новая
       36

Jquery Zoom с ползунком и процентным дисплеем

1 голос
/ 27 сентября 2019

Я делаю небольшой проект для себя и некоторых коллег и делаю ползунок диапазона в Jquery для отображения на странице, так как мы не можем редактировать реальную HTML-страницу.Я сделал 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);

      });


    });

1 Ответ

1 голос
/ 27 сентября 2019

Когда вы изменяете значение в через браузер JS, не отправляйте события

. Вы можете добавить .trigger("change"); ко всем $("#points, #textnumber").val(newValuePlus), и оно будет работать.например, $("#points, #textnumber").val(newValuePlus).trigger("change");

Демонстрация: https://codepen.io/GTech1256/pen/gOYJOzO

PS событие изменение dispath только после того, как поле ввода потеряет фокус.Если вы хотите изменить значение увеличения при вводе нового номера, используйте $ ("# textnumber"). On ("input") и .trigger ("input")

...