Question

我对JQuery很新，并且已经完成了让我的网站看起来与此类似的任务 - link here - 这包括我试图模仿的JQuery Slider函数，以便所有值根据滑块的移动方向。

然而，我能够提出的最好的结果来自以下代码中显示的结果（如果它看起来有点乱，我会道歉，我尽可能多地整理它，也jsfiddle.net由于某些原因，我目前无法为我工作。我试图使jquery滑块正常工作，参考此链接 - jquery slider，但值不会根据滑块的移动方向而改变。

以下是我到目前为止所做的代码（包括脚本中的星号，表示我以前的尝试）

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” ＆GT;

</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：here - 只需在页面上右键单击，转到检查元素 - ＆gt;来源

任何帮助都将不胜感激，如果您需要进一步澄清，请告诉我，以便我在解释中更有意义。

由于

Answer 1

您问题中的代码被分解且无法读取。这使得人们很难跳进去帮助你。发布一个jsfiddle，一个codepen，或者至少清理你的代码，以便它们都在一个代码块中。

我在这里创建了一个非常简单的代码集：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');
      },
    });
})();

它的工作原理就像我期望的那样。那么问题是什么？

如何使用JQuery增加或减少jquery滑块值？

1 个答案: