3

1 つのページに複数の jQuery ui スライダーを配置しようとしています。たくさんの例を見てきましたが、なぜそれが機能しないのかまだわかりません。これが私のコードです。

HTML

  <div class='eigenvalue'>
    <div class="slidername">Eigenvector 1</div>
    <div id='s1' class="slider"></div>
    <div id='r1'  class="slider-result">0</div> 
  </div>
  <div class='eigenvalue'>
    <div class="slidername">Eigenvector 2</div>
    <div id='s1' class="slider"></div>
    <div id='r1'  class="slider-result">0</div> 
  </div>

Javascript

$(function(){
  $('.eigenvalue').each(function(){
    $( this).('#s1').empty().slider({
       animate: true,
       range: "min",
       value: 0,
       min: -5,
       max: 5,
       step: 0.1,
       slide: function( event, ui ) {
         $( this ).('#r1').html( ui.value );
       },
      change: function(event, ui) {

        //Functionality 
       }
    });
  });
});

誰かが私を正しい方向に向けることができれば、それは大歓迎です。

ありがとう。

4

1 に答える 1

0

以下のコメントのおかげで、問題が特定されました-.find()を使用する必要がありました

以下は、正しい JavaScript コードです。

$(function(){
  $('.eigenvalue').each(function(){
    $( this).find('#s1').empty().slider({
      animate: true,
      range: "min",
      value: 0,
      min: -5,
      max: 5,
      step: 0.1, //this gets a live reading of the value and prints it on the page
      slide: function( event, ui ) {
        $( this ).find('#r1').html( ui.value );
      },
      change: function(event, ui) {
      }
    });
  });
});
于 2014-11-08T11:29:38.397 に答える