슬라이더 값을 설정 한 후 jquery로 간단한 곱셈을 수행하십시오.

값을 설정하는 범위 슬라이더를 통합하는 양식을 구현하는 가장 효율적인 방법에 대한 조언이 필요합니다 (이 경우 연간 마일리지). 그 값에 상수 (0.05)를 곱하고 그 결과를 영국 파운드 (£) 단위와 적절하게 반올림 한 소수점 이하 2 자리의 정확도로 두 번째 양식 필드에 연결합니다. 나는 아니 UI 슬라이더 (http://refreshless.com/nouislider/)라는 슬라이더를 사용하고 여기에 기본 요소를 설정 한 :슬라이더 값을 설정 한 후 jquery로 간단한 곱셈을 수행하십시오.

여기

$("#sliderAnnualMileage").noUiSlider({ 
start: [ 0 ], 
step: 1000, 
range: { 
'min': [ 0 ], 
'max': [ 120000 ] 
}, 
connect: "lower", 
serialization: { 

lower: [ 

    $.Link({ 
    target: $("#mileage"), 
    format: { 
     thousand: ',', 
     decimals: 0, 
     postfix: ' miles' 
    } 
    }) 
    ] 
} 
});

는 부분적으로 작업 JS 바이올린입니다 : http://jsfiddle.net/highlander/jMA98/1/ 이 많이 주시면 감사하겠습니다 한 모든 통찰력이나 경험.

출처

2014-06-17 Warren Puckett

당신은 포맷 기능, 두 번째 입력 상자에 다른 $.Link을 설정할 수 있습니다 http://jsfiddle.net/jMA98/3/

출처

2014-06-17 14:27:09 Tallmaris

감사합니다 :

lower: [ // your one // then this: $.Link({ target: $("#annualSavings"), method: function (val) { $(this).val("£" + (val * 0.05).toFixed(2)); } }) ]

다음은 결과입니다! 이것은 자리에 있습니다. –

다른 작은 항목 하나 : .Link 요소의 "format"옵션을 사용하여 출력물의 수천 자리에 쉼표를 추가하려고 시도했지만, 할 때 NaN 오류 메시지가 나타납니다. 함수 내에서 형식을 지정해야합니까? –

function 메쏘드와 함께'format'을 사용할 수 있는지 알아 보려면 API를 읽어야합니다. 내 생각 엔 당신이 쉼표를 함수에 직접 추가 할 필요가 없다는 것입니다. – Tallmaris

어떤 이유로 든 슬라이더가 값을 재설정합니다.

이 작품 이외의

$('#mileage').on('change',function(){ 
    console.log($(this).val().replace(' miles','')); 
    $('#annualSavings').val($(this).val().replace(' miles','')*0.05); 
});

http://jsfiddle.net/jMA98/2/

출처

2014-06-17 14:25:09

슬라이더 값을 설정 한 후 jquery로 간단한 곱셈을 수행하십시오.

답변

관련 문제