동적으로 호출 할 때 JQuery Slider의 값이 올바르게 업데이트되지 않습니다.

-1

동적으로 container.slider (...)를 호출하고 처음으로 호출 될 때만 올바른 모양을 얻습니다. 어떻게 수정해야합니까?동적으로 호출 할 때 JQuery Slider의 값이 올바르게 업데이트되지 않습니다.

업데이트 - 분명히 데모는 문제를 재현하는 빠른 해킹입니다. 문제와 관련이없는 한 글로벌 바 등을 사용하지 마십시오.

생식 (버튼을 눌러 몇 번) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html style="height: 100%;"> 
<head> 
    <title></title> 
    <link href="styles/themes/ui-lightness/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" 
     type="text/css" /> 
    <script src="scripts/external/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="scripts/external/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      // 
      var longValues = [10, 50, 90]; 
      var shortValues = [50]; 
      var mode; 

      function setLong() { 
       $("#c").slider({ orientation: "horizontal", range: false, values: longValues, min: 0, max: 100, step: 1 }); 
       mode = "long"; 
      } 

      function setShort() { 
       $("#c").slider({ orientation: "horizontal", range: false, values: shortValues, min: 0, max: 100, step: 1 }); 
       mode = "short"; 
      } 


      $("#t").on("click", function() { 


       if (mode == "long") { 
        console.log("set short"); 
        setShort(); 

       } 
       else { 
        console.log("set long"); 
        setLong(); 
       } 
      }); 

      setLong(); 

     }); 
    </script> 
</head> 
<body style="height: 100%;"> 

    <div id="c" style="width: 200px; vertical-align: middle;"> 
    </div> 

    <button id="t">Toggle 
    </button> 
</body> 
</html>

출처

2013-02-22 user1514042

당신은 버튼을 클릭하면 추가하고 핸들이 제거하려고합니까? – adeneo

아니요. 같은 컨테이너에 다른 슬라이더를 렌더링하려고합니다. – user1514042

글쎄, 다음과 같이 할 수 있습니다 -> [** FIDDLE **] (http://jsfiddle.net/qAweP/) ... – adeneo

, 그것은 기존의 핸들이 제거되지 않으며, 슬라이더를 "다시"보인다, 당신은 아마 먼저 파괴해야합니다 :

function setLong() { 
    $("#c").slider("destroy"); 
    $("#c").slider({ orientation: "horizontal", 
          range: false, 
          values: longValues, 
          min: 0, 
          max: 100, 
          step: 1 
    }); 
    mode = "long"; 
}

이 작동하는 것 같다,하지만이 이처럼 슬라이더를 파괴하고 초기화하는 데 문제가 될 수 있습니다. 실제로 제대로 테스트되지 않았거나 아무것도 아닙니다.

FIDDLE

출처

2013-02-22 15:44:57 adeneo

슬라이더() 내에서 "파괴"가 호출되지 않은 사람은 누구입니까? 슬라이더()를 호출 할 때마다 이전 슬라이스의 변형 된 버전과 반대로 새로운 슬라이더를 얻고 싶습니다. – user1514042

당신은 그것이 똑같이 작동한다고 생각할 것이고 새로운 슬라이더를 얻게 될 것입니다. 몇 가지 요소가 추가되고 이전 요소는 제거되지 않으므로 같은 요소에 새 슬라이더가 필요할 때마다 destroy를 호출해야합니다. 당신은 또한'$ (element) .slider ('options', 'min', 100)'을 호출하여 슬라이더를 바꿀 수 있지만 값을 변경 (시도) 할 때 오래된 핸들을 제거하지는 않습니다. – adeneo

맞지만 슬라이더를 완전히 바꿀 수도 있습니다 - 방향, 최소/최대, 값 - 슬라이더()를 호출하여 한번에 다시 초기화하는 것이 훨씬 쉽습니다. 왜 destroy()를 먼저 호출하지 않고 slider()를 호출할까요? – user1514042

-1

기능의에 setShort()와 setLong()와 document.ready 범위에서 글로벌에 변수를 제거하십시오.

함수 및 변수는 document.ready 처리기 실행 중에 만 존재합니다. 그런 다음 익명의 함수가 실행되면 내부의 모든 변수와 함수가 사라집니다. 변수와 함수를 document.ready 익명 함수 외부로 이동하면 무한히 존재하게됩니다. 핸들의 수를 변경하는 경우

출처

2013-02-22 15:22:53

무슨 말도 안돼, 내 친구. – user1514042

동적으로 호출 할 때 JQuery Slider의 값이 올바르게 업데이트되지 않습니다.

답변

관련 문제