4

私はそれらのいくつかを持っています：

        <div class="enunt">text here</div>
        <div class="ans"><input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" /></div>
        <div id="slider1" class="slide"></div>

他は同じ構造ですが、IDはインデックス番号によって異なります。そして、JQueryスライダーを設定する関数が必要です。私がしたことはこれです：

            function slider(i) {
                $( '#slider' + i ).slider({
                    value:4,
                    min: 1,
                    max: 7,
                    step: 1,
                    slide: function( event, ui, i ) {
                        $( '#amount' + i ).val( ui.value );
                    }
                });
                $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
            }

そしてそれをそのように呼びます：

for (var i=1; i<6; i++)
    slider(i);

これはまったく機能しません。私の間違いはどこにありますか？初めてのJQueryアプリですので、よろしくお願いします。

4

4 に答える 4

2

割り当てる関数slideは2つのパラメーターのみを取ります。

        function slider(i) {
            $( '#slider' + i ).slider({
                value:4,
                min: 1,
                max: 7,
                step: 1,
                slide: function( event, ui ) {
                    $( '#amount' + i ).val( ui.value );
                }
            });
            $( '#amount' + i ).val( $( '#slider' + i ).slider( "value" ) );
        }

また、jqueryuiJSおよびCSSファイルが含まれていることを確認してください

http://jsfiddle.net/mowglisanu/Z2aaE/1/

于 2012-12-09T21:51:56.120 に答える
2

あなたはそこにあるものを少し複雑にしすぎているようです...おそらくこのようなものがあなたが必要とするすべてです（私は何が起こっているのかを説明するためにコードにたくさんのコメントを追加しました）：

var amountFields = [],
    selector = '.slide',
    opts = {
      value: 4,
      min: 1,
      max: 7,
      step: 1,
      slide: function(e, ui) {
        var i = ui.handle.closest(selector).data('sliderId');
        amountFields[i].val(ui.value);
      }
    };

// because you have used a '.slide' class 
// name on your sliders, you can use .each() 
// to iterate through them instead of using
// your for loop that assumes there are only 
// ever 5 sliders
$(selector).each(function() {
  // get 'i' from the sliders id attribute
  var i = this.id.replace(/[a-z\-_]/gi, '');

  // initialise slider on the element 
  // and store 'i' within the elements
  // data for easy access in the
  // slide method later
  $(this).slider(opts).data('sliderId', i);

  // DOM querying is a hit on performance 
  // so cache the jQuery object for re-use 
  // in the slide method instead of 
  // re-querying the DOM
  amountFields[i] = amountFields[i] || $('#amount' + i);

  // set the amounts initial value using 
  // the opts object instead
  amountFields[i].val(opts.value);
});

これをテストしていないので、100％ではありませんが、上記のエラーはありませんが、そのようなものは機能するはずです。

===================================更新============== ========================

上記はもっと複雑に見えると思ったので、コメントとキャッシュを除いたまったく同じコードを使用して、実際にどれほど単純かを示します。

var opts = {
  value: 4,
  min: 1,
  max: 7,
  step: 1,
  slide: function(e, ui) {
    var i = ui.handle.closest('.slide').data('sliderId');
    $('#amount' + i).val(ui.value);
  }
};

$('.slide').each(function() {
  var i = this.id.replace(/[a-z\-_]/gi, '');
  $(this).slider(opts).data('sliderId', i);
  $('#amount' + i).val(opts.value);
});

以前にパフォーマンスのためにキャッシュを追加したので、それがないと、パフォーマンスは遅くなりますが、それでも機能します。ビットはスライダーIDを取得し、.replace()文字、ハイフン、またはアンダースコアを削除して、必要なビットである数字だけを残します。

于 2012-12-09T22:33:42.583 に答える
1

次のようにスライド関数に渡しiます。

slide: function( event, ui, i ) {
         $( '#amount' + i ).val( ui.value );
       }
于 2012-12-09T21:16:33.627 に答える
1

に閉じ中括弧がないよう}ですfunction slide(i)。そうでなければ、あなたのスクリプトは私にとって魅力のように機能しました。

将来的には、取得したエラー、または領域を取得できなかったエラーを投稿する必要があります。最新のWebブラウザーのコンソール内から、コードのエラーを確認できます。

于 2012-12-09T21:27:19.373 に答える