jquery 두 슬라이더 다른 가격

Question

나는 다음과 함께 지금 stuk입니다 :

나는 두 개의 슬라이더가 있습니다. 다른 하나는 계약 기간이 있습니다. 수량이 올라가면 조각 당 가격이 내려갑니다. 계약 기간이 길어지면 조각 당 가격이 내려갑니다.

나는 이것을 다음과 같이 가지고있다 : http://jsfiddle.net/vBVkL/16/ 어떻게 든 나는 배치를 사용할 때 조각 당 가격을 바꾸기 위해 일할 수 없다.

qty = ui.value; //-> this works 

    qty = batches[ui.value - 1]; //-> this doesn't work 

누군가 나를 도와 줄 수 있습니까? 감사합니다.

Answer 1

변경하려면 슬라이더 처리기에 다음 줄 :

$("input").val(prices[contract][qty - 1]); 

원래 코드는 문자열 변수 qty을 사용

$("input").val(prices[contract][ui.value - 1]); 

합니다. 1에서 공제하려고 할 때 batches 배열의 색인을 생성하는 데 사용할 수없는 "번호가 아님"이됩니다.

prices 배열에도 문제가 있습니다. 슬라이더가 할 이유에 대해 확실하지 않다 무엇

var prices = { 
    'none': [10, 9, 8, ?], 
    '12 months': [9, 8, 7, ?], 
    '24 months': [8, 7, 6, ?], 
    '36 months': [7, 6, 5, ?], 
}; 

Updated fiddle

입니다 : 그들은 세 개의 값을 포함하지만 슬라이더는 네 번째를 선택할 수 있습니다, 이러한 배열의 끝에 값을 추가해야 페이지가 처음로드 될 때 올바르게 애니메이션되지 않습니다.

편집 : 슬라이더가 페이지가로드 될 때를 작동하지 않는 이유 때문에 당신의 변수를 초기화하는 데 사용되는 값입니다

:

var contract = 'Geen' 

슬라이더가 $("input").val(prices[contract][qty - 1]); 시도 코드를 이동 contracts 배열의 값 Geen을 찾아 실패하면 오류로 인해 함수가 종료되고 jQueryUI가 슬라이더를 업데이트하는 작업을 완료하지 않습니다. 두 번째 슬라이더를 움직여야 변수가 올바르게 설정됩니다.

contract의 초기 값을 "없음"으로 설정하면 코드가 올바르게 실행되고 슬라이더가 움직입니다.

또한 계약 기간 슬라이더를 변경하면 가격을 설정할 때 수량 슬라이더의 값이 무시되는 버그가있었습니다.

$("input").val(prices[contract][$("#slider1").slider("value") - 1]); 

이 모두가 지금 작동 the updated fiddle에서보세요 : 라인 :에 "슬라이더 2"이벤트 핸들러에서

$("input").val(prices[contract][ui.value - 1]); 

을 변경해야합니다.