2016-09-01 4 views
0

실제 문제는 아직 기본적인 자바 스크립트를 아직 배웠다는 것입니다. 나는 배우고 있지만 그것은 지금 모두 엉망이 됐어.jQuery UI 이해하기 (기본) : 슬라이더 값을 설정하는 방법

나는 이것이 정말 간단하다고 생각하지만 아직 내 머리를 감쌀 수 없다.

나는 마침내 위대한 일을했다는 것을 알았고 충분히 이해했다. 그런 다음 도움이된다. (그리고 그것도 훌륭하다.) 그러나 당신이 객체를 선택하고 그것을 사용하는 가치를 바꾸는 방법을 이해하지 못한다. jQuery. 여기

는 새로운 코드입니다 (큰 일) :이 슬라이더 값을 쉽게 변경할 수 순수 HTML5 슬라이더와

.html 중에서

<div style="display:block;margin:100px auto;padding:0 8%"> 
    <input type="text" id="amount3" style="border:0 none" class="slider_value"> 

    <div id="slider3" class="slider_container" data-value="0" data-min="0" data-max="15" data-steps="1"></div> 

    <div class="steps"> 
     <?php 
     for ($i=0, $t=15; $i<=$t ; $i++) { 
      echo '<span class="tick" style="left:'.(100/$t*$i).'%;'; 
      if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;'; 
      echo '">|<br>'.$i.'</span>'; 
     } 
     ?> 
    </div> 
</div> 

의 .js

$(function(){ 
    var value, step, min, max, input; 

    $('.slider_container').each(function(){ 
     input = $(this).prev('.slider_value'); 
     value = $(this).data('value'); 
     step = $(this).data('steps'); 
     min = $(this).data('min'); 
     max = $(this).data('max'); 

     $(this).slider({ 
      value: value, 
      min: min, 
      max: max, 
      step: step, 
      slide: function(event, ui) { 
       $(this).prev('.slider_value').val(ui.value); 
      } 
     }); 

     input.val($(this).slider("value")); 
    }); 
}); 

: document.getElementById("slider3").value = '5'; 그러나 이것은 새로운 코드와 함께 작동하지 않으며 그것을 이해할 수 없습니다.

ID가 서로 다른 여러 슬라이더가 있습니다. 나는 AJAX SQL 검색을 실행하는 필드에 onchange 이벤트를 가지고 있고 그 데이터를 반환하여 페이지의 모든 슬라이더를 설정합니다. 이 모든 jQuery UI를 추가 할 때까지 작동합니다 ...하지만 변경하려면 원하는 슬라이더를 선택하는 방법을 이해할 수 없기 때문에.

+1

http://api.jqueryui.com/slider/#method-value 두 번째 예를 참조하십시오. – asawyer

+0

예 글을 올리기 전에 그것을 읽었습니다. 나는 그것이 단순하다는 것을 알고 있지만 $ (". 선택자")는 무엇이 필요합니까? 어떻게 식별 할 수 있습니까? 또는 더 나은 아직, 위의 내 코드에 대한 올바른 구문은 무엇입니까? –

+0

.selector가 요소 ID인지 묻는 것 같군요? document.getElementById ("slider3"). value = '5'; html5와 작동하지만 위의 코드에서 어떤 선택기를 사용합니까? –

답변

0

은 열심히 일하지 않는 정보가있다 :

$(p2).slider({ 
    value: 0, 
    slide: function(event, ui) { 
    $(this).prev('.slider_value').val(ui.value); } 
});