如何使用jquery增加或减少jquery滑块值
How can I increase or decrease jquery slider values with JQuery?
我是一个相当新的JQuery和已经给了一个任务，使我的网站看起来类似于这个-链接在这里-这包括JQuery滑块函数，我试图模仿，使所有的值根据滑块的移动方向变化。
然而，我能想出的最好的结果是从下面的代码中显示的(我的道歉，如果它看起来有点乱，我试着整理它尽可能多，也jsfiddle.net目前不为我工作，出于某种原因。我试图使jquery滑块工作正常参考从这个链接在这里- jquery滑块，但值不改变根据滑块的移动方向。
下面是我到目前为止所做的代码(包括来自脚本的星号，表示我以前的尝试)
HTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org./TR/html4/loose.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/styleresult.css"/>
<link rel="stylesheet" href="css/jquery-ui.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> Loan Result </title>
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery/jquery-ui.js"></script>
<script>
$(function() {
$( ".CarLoanWarehouseCalc_Slider").slider({
range: true,
min: 3000,
max: 50000,
values: [ 3000, 50000 ],
step: 10,
slide: function(event, ui) {
$( "#CarLoanWarehouseCalc_Value_Box1").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
handlevalues=($(".CarLoanWarehouseCalc_Slider").slider('values'));
},
change: function(event, ui)
{
$( "#CarLoanWarehouseCalc_Value_Box1").val(ui.values[0]);
}
});
});
/*
$(function() {
$( "#CarLoanWarehouseCalc_Slider_Box1").slider({
range: "min",
value: 3500,
min: 3000,
max: 50000,
slide: function(event, ui) {
$( "#CarLoanWarehouseCalc_Value_Box1").val("$" + ui.value);
}
});
$( "#CarLoanWarehouseCalc_Value_Box1").val("$" + $( "#CarLoanWarehouseCalc_Slider_Box1").slider("value") );
});
*/
/*
$(function() {
$('#CarLoanWarehouseCalc_Slider_Box1').slider({
slide: function(event, ui) {
$('#CarLoanWarehouseCalc_Value_Box1').text(ui.value).css('left', (ui.value - 0.5) + '%');
}});
$('#CarLoanWarehouseCalc_MinValue_Box1').text($('#CarLoanWarehouseCalc_Slider_Box1').slider('option', 'min'));
$('#CarLoanWarehouseCalc_MaxValue_Box1').text($('#CarLoanWarehouseCalc_Slider_Box1').slider('option', 'max'));
});
*/
/*
$(function () {
$("#CarLoanWareHouseCalc_Slider_Box1").slider({
range: "min",
min: 1,
max: 10,
slide: function (event, ui) {
$("#CarLoanWarehouseCalc_Value_Box1").text(ui.value);
},
change: function (event, ui) {
alert("Yeah Yeah" + ui.value);
}
});
});
*/
/*
$(function() {
$( "#CarLoanWarehouseCalc_SliderBox1").slider({
range: true,
min: 3000,
max: 50000,
values: [ 6000, 30000 ],
slide: function(event, ui) {
$( "#CarLoanWarehouseCalc_Value_Box1").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#CarLoanWarehouseCalc_Value_Box1").val("$" + $( "CarLoanWareHouseCalc_Slider_Box1").slider( "values", 0 ) +
" - $" + $( "#CarLoanWareHouseCalc_Slider_Box1" ).slider( "values", 1 ) );
});
*/
</script>
</head>
<body>
<div id="maincontent" class="Calc-page">
<h1>Car Loan
<strong>Calculator</strong>
</h1>
<div class="entry">
<div id="_atssh" style="visibility: hidden; height: 1px; width: 1px; position: absolute; z-index: 100000;">
</div>
<div class="CarLoanWarehouseCalc_BoxContainer" id="CarLoanWarehouseCalc_Box1">
<!-- Car Loan Warehouse Title -->
<div class="CarLoanWarehouseCalc_Title" id="CarLoanWarehouseCalc_Title_Box1">Loan Amount</div>
<!-- Car Loan Warehouse Desc -->
<div class="CarLoanWarehouseCalc_Desc" id="CarLoanWarehouseCalc_Desc_Box1">Select the amount you wish to borrow. The Car Loan Warehouse will loan between £3,000 and £50,000</div>
<!-- Car Loan Warehouse Value -->
<div class="CarLoanWarehouseCalc_Value" id="CarLoanWarehouseCalc_Value_Box1">£3,500</div>
<!-- Car Loan Warehouse Value Hidden-->
<input class="CarLoanWarehouseCalc_ValueHidden" type="range" id="CarLoanWarehouseCalc_ValueHidden_Box1" value="3500" min="3000" max="50000" data-highlight="true" />
<!-- Car Loan Warehouse Slider -->
<div class="CarLoanWarehouseCalc_Slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
id = " CarLoanWarehouseCalc_Slider_Box1 ">
</div>
<!-- Car Loan Warehouse Min Value -->
<div class="CarLoanWarehouseCalc_MinValue" id="CarLoanWarehouseCalc_MinValue_Box1">£3,000
</div>
<!-- Car Loan Warehouse Max Value -->
<div class="CarLoanWarehouseCalc_MaxValue" id="CarLoanWarehouseCalc_MaxValue_Box1">£50,000
</div>
</div>
<div class="CarLoanWarehouseCalc_BoxContainer" id="CarLoanWarehouseCalc_Box2">
<!-- Car Loan Warehouse Title -->
<div class="CarLoanWarehouseCalc_Title" id="CarLoanWarehouseCalc_Title_Box2">Repayment Period
</div>
在12个月到60个月之间选择贷款期限36个月
12个月60个月 <div class="CarLoanWarehouseCalc_BoxContainer" id="CarLoanWarehouseCalc_Box3">
信用评分选择最符合您情况的信用评分示例好
<div class="CarLoanWarehouseCalc_ValueDesc" id="CarLoanWarehouseCalc_ValueDesc_Box3">Home owner or long term tenant at same address for substantial period with electoral roll record. Employed by same company or self employed for long period. Long credit history with mortgage, loans and credit cards. Few credit applications. Credit with a few missed payments, defaults or County Court Judgements.
</div>
坏优秀的
<div class="CarLoanWarehouseCalc_BoxContainer" id="CarLoanWarehouseCalc_Box4">
<!-- Car Loan Warehouse Desc -->
<div class="CarLoanWarehouseCalc_Desc" id="CarLoanWarehouseCalc_Desc_Box4">Here is your personal financial example</div>
<!-- Car Loan Warehouse APR -->
<div class="CarLoanWarehouseCalc_APR" id="CarLoanWarehouseCalc_APR_Box4">13.9% Typical APR</div>
<!-- Car Loan Warehouse APR Hidden-->
<input class="CarLoanWarehouseCalc_APRHidden" type="hidden" id="CarLoanWarehouseCalc_APRHidden_Box4" value="">
<!-- Car Loan Warehouse Monthly Total -->
<div class="CarLoanWarehouseCalc_MonthlyTotal" id="CarLoanWarehouseCalc_MonthlyTotal_Box4">Monthly Payment £134.28</div>
<!-- Car Loan Warehouse Total -->
<div class="CarLoanWarehouseCalc_Total" id="CarLoanWarehouseCalc_Total_Box4">Total Repayable £4,834.00</div>
</div>
<a href="http://www.thecarloanwarehouse.com/apply-online/" title="Apply Now for Free" class="CarLoanWarehouseCalc_BoxContainer box4-apply-now" id="CarLoanWarehouseCalc_Box5">
Apply Now for FREE Decision
</a>
</div>
</div>
</body>
</html>
CSS可以从这里的链接找到:在这里-只需右键单击该页，进入检查元素->源
任何帮助都将是感激的，如果你需要进一步的澄清，请告诉我，这样我可以在我的解释更有意义。
谢谢
您的问题中的代码被分解并且无法阅读。这使得别人很难介入并帮助你。要么发布一个jsfiddle，一个codependency，或者至少清理你的代码，使它都在一个代码块内。
我在这里创建了一个非常简单的代码依赖:http://codepen.io/anon/pen/Lzfcp。它基本上就是你上面写的javascript:
(function() {
$( ".CarLoanWarehouseCalc_Slider").slider({
range: true,
min: 3000,
max: 50000,
values: [ 3000, 50000 ],
step: 10,
slide: function(event, ui) {
$( "#CarLoanWarehouseCalc_Value_Box1").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
handlevalues=$(".CarLoanWarehouseCalc_Slider").slider('values');
},
});
})();
，它像我期望的那样工作。那么问题是什么呢?
相关文章：
- 我可以在Javascript/jQuery中使用一个变量作为键吗
- 如何在jquery中使用实时计算求和值
- 在jQuery中使用$('body'）.html(''）意味着什么
- 在Jquery中使用变量作为对象名称
- 如何将while循环中生成的值存储到变量中，以便以后在JQuery中使用
- jquery无法使用无限滚动
- 将FormParams与Jersey和jQuery一起使用
- jQuery UI使用json文件自动完成
- SlideDown(）不会'不能在jQuery中使用After(）
- 在JQuery中使用谷歌地图Api事件/侦听器
- jQuery字符串使用split(）方法在空格后拆分字符串
- 自动完成jquery;t使用ngmodel和ngrepeat(angular）
- 在jquery中使用css获取背景值
- jQuery idTabs-使用鼠标悬停自动更改和淡入淡出
- Javascript:在jQuery中使用xpath
- jQuery 无法使用 AJAX 调用访问函数内部的函数参数
- 在 for 循环 jQuery 中使用 one(）
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- jQuery动态使用.append(）添加输入，但发布表单不是追加数据
- 存储数据的最佳方式是什么，以便与jquery一起使用
