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

Question

我正在为我和一些同事做一个小项目，并在Jquery中制作一个范围滑块以显示在页面上，因为我们无法编辑实际的HTML页面。我制作了一个范围滑块，可以放大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. 只有在输入字段失去焦点后才会更改事件路径。如果要在键入新数字时更改缩放值，请使用$("#textnumber"(.on("input"(和.trigger("input"(