2016-09-01 7 views
0

本当の問題は、基本的なJavaScriptをまだ十分に学んでいないことです。私は学んでいますが、それは私のすべてが今乱されています。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); } 
}); 
関連する問題