我正在研究具有多个幻灯片范围的价格计算器。
我很难将结果转换为整数并将两个结果相乘。还不知道如何处理滑块的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>
&#13;
.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;
}
&#13;
<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>
&#13;
答案 0 :(得分:0)
使用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();
});