3

私はスタックオーバーフローや他の場所で自分自身を教育してきましたが、多くのことを学びましたが、これにはまだ非常に慣れていません. 5 つのスライダーを含むフォームを設定しています。その値は PHP ページに投稿されます。すべてが正常に機能しています...フォームがすべてのスライダーの最終スライダーの値を送信することを除いて。this属性または関数を使用する必要があると思いますがeach、方法がわかりません...

ここに私のJSがあります：

$(function(){

    var currentValue = $('#currentValue');

    $("#slider1,#slider2,#slider3,#slider4,#slider5").slider({ 
        range: "min",
        value:37,
        min:1,
        max: 500,
        slide: function(event, ui) {
            currentValue.html(ui.value);
            $("input:hidden").val(ui.value);
        }
    });

});

ここに私のHTMLがあります：

<input type=hidden name="slider1" id="slider1" class="slider-input" value="ui.value" />
<input type=hidden name="slider2" id="slider2" class="slider-input" value="ui.value" />
<input type=hidden name="slider3" id="slider3" class="slider-input" value="ui.value" />
<input type=hidden name="slider4" id="slider4" class="slider-input" value="ui.value" />
<input type=hidden name="slider5" id="slider5" class="slider-input" value="ui.value" />

助言がありますか？私は困惑しています！

4

1 に答える 1

2

フォームの入力の構造をよく理解していないため、フォームの非表示フィールドのみが各スライダーに一致するため、インデックスを作成できると仮定します。

ループ内にプラグインを実装する方eachが簡単な場合があるため、javascript クロージャー内のコレクションの各要素に簡単にアクセスできます。jQuery UI を使用すると、 events 内の個々の要素にアクセスできますが、すべてのプラグインがアクセスできるわけではないため、このパターンが非常に役立つ場合があります。

var $sliders=$("#slider1,#slider2,#slider3,#slider4,#slider5")

$sliders.each(function(){
    /* now have access to individual slider eleemnt*/
   var $slide=$(this);
      /* match input index to index of this slider*/
    var $input= $("input:hidden").eq(  $sliders.index($slide) );
    /* initiate slider on this element*/
     $slide.slider({ 
        range: "min",
        value:37,
        min:1,
        max: 500,
        slide: function(event, ui) {
            currentValue.html(ui.value);
            /* assign value to correct input */
            $input.val(ui.value);
        }
    });
});
于 2012-10-27T22:49:09.667 に答える