4

ページの読み込み時にスライダーのハンドルに値を生成し、ラベルにも別の値を生成するスライダーがあります。ページの読み込み時に NaN が発生する理由がわかりませんが、スライダーを動かすと値が表示されます。

自分でわかるように見てくださいFiddle

コードは問題ないように見えますが、値はページの読み込み時にもハンドルに表示されません。

$("#slider1").slider({
    max:350,
    min:100,
    step:10,
    value:100,
    animate: 'true',
    slide: function(event, ui) {  
        $("#amount").val(ui.value);
        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');
                update();
    }    
});

function addDaysToDate(days) {
  var mths = new Array("Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec");

  var d = new Date();
  d.setHours(d.getHours() + (24 * days));

  var currD = d.getDate();
  var currM = d.getMonth();
  var currY = d.getFullYear();

  return mths[currM] + " " + currD + ", " + currY;
}

$("#slider2").slider({
    max:30,
    min:7,
    value:7,
    animate: 'true',    
    slide: function(event, ui) {  

        $("#days").val(ui.value);
            $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'<span class="unit"> days</span></div>');
        $("#date").text(addDaysToDate(parseInt($("#days").val())));
                update();
    },
    create: function(event, ui) {
      $("#date").text(addDaysToDate(parseInt($("#days").val())));
    }    
});

$("#days").val($("#slider2").slider("value"));

$("#days").change(function(event) {
  var data = $("#days").val();
  if (data.length > 0)
  {
     if (parseInt(data) >= 7 && parseInt(data) <= 31)
     {
         $("#slider2").slider("option", "value", data);
     }
     else
     {
        if (parseInt(data) < 1)
        {
            $("#days").val("7");
            $("#slider2").slider("option", "value", "7");
        }
        if (parseInt(data) > 31)
        {
            $("#days").val("31");
            $("#slider2").slider("option", "value", "31");
        }
     }
  }
  else
  {
    $("#slider2").slider("option", "value", "7");
  }
  $("#date").text(addDaysToDate(parseInt($("#days").val())));
});

update();
4

3 に答える 3

9

最初は後;

$amount1 = $("#amount").val();

$amount1空の文字列です。

あなたがそれからあなたがそれから全体の表現を作ることをparseInt($amount1)あなたが得NaN ない とき。0NaN

空の値を検出して処理します。例：$amount1 = parseInt($amount1, 10) || 0;

于 2012-10-29T12:50:02.120 に答える
2

$('#amount').val();呼び出す前にデフォルト値に設定する必要がありますupdate()

于 2012-10-29T12:49:39.003 に答える
0

次の変更を行う必要があります

HTML

デフォルトのテキスト100を次の<span class="decimal">100</span>ように配置する必要があります

<div class="loanForm-label">Your loan:</div>
<div class="loanForm-totalToBorrow v-number" id="amount">
    <span class="dollarSign">£</span> <span class="decimal">100</span>
</div>

JQuery

ここで のすべてのインスタンス$("#amount").valを$("#amount .decimal").textlikeに変更します

function update() {            
     $interest = 0.15 ;
     $perday = 15 ;
     $amount1 = Number($("#amount .decimal").text());
     if($amount1>0){
         $dayscount =Number($("#days").val());
         $amount2 = $amount1 + $interest * $amount1 + ($dayscount * ($perday/100));
         $apr = ((($amount2-$amount1) / $amount1 ) / (($dayscount/365) * 100)) ;
         $("#amount .decimal").text($amount1);
         $("#amount2").text($amount2);
         $("#amount3").text(parseFloat($amount2-$amount1).toFixed(2));
         $("#amount4").text(parseFloat($apr).toFixed(2));
     }
}


$("#slider1").slider({
    max:350,
    min:100,
    step:10,
    value:100,
    animate: 'true',
    slide: function(event, ui) {  
        $("#amount .decimal").text(ui.value);
        $(this).find('.ui-slider-handle')
               .html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');
        update();
    }    
});

function addDaysToDate(days) {
  var mths = new Array("Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec");

  var d = new Date();
  d.setHours(d.getHours() + (24 * days));

  var currD = d.getDate();
  var currM = d.getMonth();
  var currY = d.getFullYear();

  return mths[currM] + " " + currD + ", " + currY;
}

$("#slider2").slider({
    max:30,
    min:7,
    value:7,
    animate: 'true',    
    slide: function(event, ui) {  
        $("#days").val(ui.value);
        $(this).find('.ui-slider-handle')
               .html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'<span class="unit"> days</span></div>');
        $("#date").text(addDaysToDate(parseInt($("#days").val())));
        update();
    },
    create: function(event, ui) {
      $("#date").text(addDaysToDate(parseInt($("#days").val())));
    }    
});

$("#days").val($("#slider2").slider("value"));

$("#days").change(function(event) {
  var data = $("#days").val();
  if (data.length > 0)
  {
     if (parseInt(data) >= 7 && parseInt(data) <= 31)
     {
         $("#slider2").slider("option", "value", data);
     }
     else
     {
        if (parseInt(data) < 1)
        {
            $("#days").val("7");
            $("#slider2").slider("option", "value", "7");
        }
        if (parseInt(data) > 31)
        {
            $("#days").val("31");
            $("#slider2").slider("option", "value", "31");
        }
     }
  }
  else
  {
    $("#slider2").slider("option", "value", "7");
  }
  $("#date").text(addDaysToDate(parseInt($("#days").val())));
});
update();

このデモをチェック

于 2012-10-29T13:15:20.607 に答える