javascript - 您如何从两个价格管理员中获得多个值

Question

我正在研究具有多个幻灯片范围的价格计算器。

我很难将结果转换为整数并将两个结果相乘。也不确定如何处理 slider 的 onchange 功能。

请看下面我的代码:

  < script >
    $(function() {
      $("#slider-range-min").slider({
        range: "min",
        value: 400,
        min: 400,
        max: 2000,
        slide: function(event, ui) {
          $("#amount").val("£" + ui.value);
        }
      });
      $("#amount").val("£" + $("#slider-range-min").slider("value"));
      $('#slider-range-min').draggable();
    });

  $(function() {
    $("#slider-range-min2").slider({
      range: "min",
      value: 3,
      min: 3,
      max: 12,
      slide: function(event, ui) {
        $("#amount2").val(ui.value + " months");
      }
    });
    $("#amount2").val($("#slider-range-min2").slider("value") + " months");
    $('#slider-range-min2').draggable();
  });

  $(function() {
    x = ($("#slider-range-min").text(), 10);
    y = ($("#slider-range-min2").text(), 10);
    $("#amount3") = (x * y).text().draggable();
  });

  < /script>

.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.6em;
  height: 2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}
.ui-slider-horizontal {
  height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -.6em;
  margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}
/* Component containers
----------------------------------*/

.ui-widget input,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}
.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}
/* Interaction states
----------------------------------*/

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */

html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #323470;
  font-weight: normal;
  color: #454545;
}
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: #009786;
  font-weight: normal;
  color: #2b2b2b;
}

<script src="https://cdn.jsdelivr.net/jquery.ui.touch-punch/0.2.3/jquery.ui.touch-punch.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p>
  <label for="amount">Maximum price:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range-min"></div>
<p></p>
<p></p>
<p>
  <label for="amount2">Maximum time period:</label>
  <input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range-min2"></div>

<p></p>
<p></p>
<p>
  <label for="amount2">Maximum time period:</label>
  <input type="text" id="amount3" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

Answer 1

使用 parseInt 将值转换为整数。 (你当然应该在使用它们之前检查值是否有效。

此外，x 和 y 是数字，您不能像那样使用 .draggable() 或将它们设置为等于 jQuery 对象:

 $(function() {
    x = parseInt($("#slider-range-min").text(), 10);
    y = parseInt($("#slider-range-min2").text(), 10);
    if(!isNaN(x) && !isNaN(y))
    $("#amount3").val(x * y)).draggable();
  });