jQuery UI 슬라이더가 슬라이드 이벤트에서 변경되는 슬라이더

Question

부트 스트랩 및 jQueryUI에 문제가 있습니다. 구현 문제가 더 많이 있다고 생각합니다.

나는 아래 지금까지 내 코드는 다음 i가 팝 오버

의 텍스트를 변경하려고 슬라이더의 사이드 이벤트에, jQueryUI 슬라이더에 부트 스트랩 팝 오버를 추가하려합니다.

<Script type="text/javascript"> 
    jQuery(function() { 
    jQuery("#slider1").slider({ 
     value: 5, 
     min: 0, 
     max: 10, 
     step: 1, 
     slide: function (event, ui) { 
      switch(ui.value){ 
       case 0: 
        jQuery("#slider1").data('popover').options.content = 'new content 0'; 
       break; 
       case 1: 
        jQuery("#slider1").data('popover').options.content = 'new content 1'; 
       break; 
       case 2: 
        jQuery("#slider1").data('popover').options.content = 'new content 2'; 
       break; 
       case 3: 
        jQuery("#slider1").data('popover').options.content = 'new content 3'; 
       break; 
       case 4: 
        jQuery("#slider1").data('popover').options.content = 'new content 4'; 
       break; 
       case 5: 
        jQuery("#slider1").data('popover').options.content = 'new content 5'; 
       break; 
       case 6: 
        jQuery("#slider1").data('popover').options.content = 'new content 6'; 
       break; 
       case 7: 
        jQuery("#slider1").data('popover').options.content = 'new content 7'; 
       break; 
       case 8: 
        jQuery("#slider1").data('popover').options.content = 'new content 8'; 
       break; 
       case 9: 
        jQuery("#slider1").data('popover').options.content = 'new content 9'; 
       break; 
       case 10: 
        jQuery("#slider1").data('popover').options.content = 'new content 10'; 
       break; 
      } 
      jQuery("#slider1").find(".ui-slider-handle").text(ui.value); 
      jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(ui.value); 
     } 
    }); 
    jQuery("#amount1").val("£" + jQuery("#slider1").slider("value")); 
}); 
jQuery(document).ready(function() { 
    var value = jQuery("#slider1").slider("option","value"); 
    jQuery("#ctl00_MainContent_rptQuestions_ctl00_sdrQuestion_hdnValue").val(value); 
    jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 5', content: "It's so simple to create a tooltop for my website!"}); 
    jQuery("#slider1").popover('show'); 
    jQuery("#slider1").find(".ui-slider-handle").text(value); 
}); 

그래서, 기본적으로 상기 코드는, (1)의 증가와 함께 0 내지 10 슬라이더를 설정하는 일, 그렇다면, 현재의 UI 값을 표시하는 슬라이더 핸들 라벨 세트 슬라이드 이벤트에서 변경하십시오. 내가 겪고있는 문제는 슬라이더를 움직일 때 부트 스트랩이 바뀌지 않는다는 것입니다.

부트 스트랩 팝 오버가 초기화되고 JS를 디버깅 할 때 페이지가로드 될 때 스위치 문이 다음과 같이 표시됩니다. 값이 전달되면 bs 텍스트가 변경되지 않는 것입니다.

Answer 1

음, popover는 옵션 변경에 대해 알리지 않습니다. setContent를 호출보십시오 : 내가 질문을 게시하기 때문에이 작업 한 있도록

var popover = jQuery("#slider1").data('popover'); 
popover.options.content = 'new content 10'; 
popover.setContent(); 

Answer 2

좋아, 나는 실제로 내가 추가 한 switch 문 내부

그래서 수정을 발견했다

    case 0: 
         jQuery("#slider1").popover('destroy'); 
         jQuery("#slider1").popover({title: 'Twitter Bootstrap Popover 0', content: "It's so simple to create a tooltop for my website!", animation: false}); 
         jQuery("#slider1").popover('show'); 
        break; 

나는 값이 0이 될 때까지 애니메이션을 false로 만드는 것에 의해서도 동일한 결과를 얻었습니다. popover가 사라 졌을 때 정확히 내가 원하는 것입니다.

내가 가지고있는 유일한 작은 웃음은 popover가 페이지 init에로드 될 때 popover가 약간 위의 위치에 나타나고 슬라이더가 움직이면 popover가 약간 떨어지지만 확실합니다. 그것을 가지고 놀 수 있고 같은 장소에 나타나게 할 수 있습니다.

희망이 같은 문제

건배 조 가진 사람을 도움이됩니다.