0
我有两个滑块和输入。当我们改变顶部的数字时，底部的数字和幻灯片不会改变。我应该完成什么？更改输入和滑块在UI滑块
$(document).ready(function() {
\t \t var $doorwayWidth = $(".js-doorway-width"); // ширина
\t \t var $doorWidthDisable = $(".js-door-width"); // ширина disable
\t \t var $doorwayHeight = $(".js-doorway-height"); // высота
\t \t var $doorHeightDisable = $(".js-door-height"); // высота disable
\t \t
\t \t var doorwayWidthSlider = $("#doorwayWidthSlider").slider({
\t \t range: "min",
\t \t min: 650,
\t \t step: 50,
\t \t max: 1000,
\t \t value: 1000,
\t \t slide: function(event, ui) {
\t \t var totalWidth = ui.value ;
\t \t $doorwayWidth.val( ui.value);
\t \t var doorSize = calcDoorSize(totalWidth);
\t \t doorWidthSlider.slider("option","value", doorSize[0]);
\t \t },
\t \t change: function(event, ui){
\t \t $doorwayWidth.val( ui.value);
\t \t }
\t \t });
\t \t $doorwayWidth.val(doorwayWidthSlider.slider("value"));
\t \t $doorwayWidth.val(700).focusout(function() {
\t $("#doorwayWidthSlider").slider("value", this.value);
\t }).focusout();
\t \t var doorWidthSlider = $("#doorWidthSlider").slider({
\t \t range: "min",
\t \t disabled: true,
\t \t min: 600,
\t \t step: 100,
\t \t max: 900,
\t \t value: 900,
\t \t change: function(event, ui){
\t \t $doorWidthDisable.val( ui.value);
\t \t }
\t \t });
\t \t $doorWidthDisable.val(doorWidthSlider.slider("value"));
\t \t var sliderOptions = [
\t \t {
\t \t minWidth: 650,
\t \t maxWidth: 700,
\t \t minHeight: 2040,
\t \t maxHeight: 2080,
\t \t doorWidth: 600,
\t \t doorHeight: 2000
\t \t },
\t \t {
\t \t minWidth: 750,
\t \t maxWidth: 800,
\t \t minHeight: 2040,
\t \t maxHeight: 2080,
\t \t doorWidth: 700,
\t \t doorHeight: 2000
\t \t },
\t \t {
\t \t minWidth: 850,
\t \t maxWidth: 900,
\t \t minHeight: 2040,
\t \t maxHeight: 2080,
\t \t doorWidth: 800,
\t \t doorHeight: 2000
\t \t },
\t \t {
\t \t minWidth: 950,
\t \t maxWidth: 1000,
\t \t minHeight: 2040,
\t \t maxHeight: 2080,
\t \t doorWidth: 900,
\t \t doorHeight: 2000
\t \t }
\t \t ];
\t \t function calcDoorSize(totalWidth) {
\t \t var doorWidth = null;
\t \t for (var i = 0; i < sliderOptions.length; i++) {
\t \t if (totalWidth >= sliderOptions[i].minWidth && totalWidth <= sliderOptions[i].maxWidth) {
\t \t doorWidth = sliderOptions[i].doorWidth;
\t \t break;
\t \t }
\t \t }
\t \t return [ doorWidth];
\t \t }
\t \t
});<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
\t <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
\t <link href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" />
\t <div>
\t <div>
\t <label>Width</label>
\t <input class="js-doorway-width" name="calculatorPvhSquare" type="text">
\t </div>
\t <div>
\t <div id="doorwayHeightSlider"></div>
\t
\t <img src="" alt="">
\t
\t <div id="doorwayWidthSlider"></div>
\t </div>
\t </div>
<div>
<div>
<label>Width</label>
<input class="js-door-width" type="text" disabled>
</div>
<div>
<div id="doorHeightSlider"></div>
<img src="" alt="">
<div id="doorWidthSlider" ></div>
</div>
</div>
O，谢谢！我有一个想法 var totalWidth = this.value; var doorSize = calcDoorSize（totalWidth）; doorWidthSlider.slider（“option”，“value”，doorSize [0]）; 但显然物体的位置起着一定的作用。谢谢！ – crabosse0
@ crabosse0随着'focusout'的改变，我重新安排了现有的代码。很高兴这个解决方案帮助你。 –