0

私は基本的にここからこのコードのほとんどをつかみましたhttp://jqueryui.com/slider/#stepsそして、「追加」ボタンを押すたびに新しいスライダーをどのように追加できるのか疑問に思っています。

<script>

$(function () {
$( "#slider" ).slider({
  value:100,
  min: 0,
  max: 500,
  step: 50,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
  }
});
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

$(document).on('click', '.addNew', function() {
    var newSlider = $('#slider').html();
    $('#slider').append(newSlider);
});

</script>

<p>
  <button class="addNew">Add</button>   
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

<div id="slider"></div>

誰かがそれを助けることができれば、ありがとう。

4

1 に答える 1

0

新しいスライダーで何をしたいのか明確ではありませんが、コードにはいくつかの問題があります。最初に、最初のスライダーの内側 (下ではなく) に 2 番目のスライダー div を追加します。2 番目に、最初のスライダーと同じ ID で追加します。ほぼ確実に異なる ID が必要です。最後に、新しい要素のスライダーを初期化する必要があります。

したがって、このようなものです（あなたのを置き換えます$(document).on(...) { ... }）。

// Global variable to count make the ids different (could embed this on some object)
slider_count = 1; 

$(document).on('click', '.addNew', function() {
    // Work out the id for the new slider
    var new_slider_id = 'slider'+slider_count;
    // Attach it to the end of the body -- you might want a 'container' DIV here
    $('body').append("<div id='"+new_slider_id+"'></div>");
    // Initialize the new slider
    $( "#"+new_slider_id ).slider();
    // Update our unique id count
    slider_count = slider_count + 1;
});

また、値を処理するために何かを行う必要があります。それらを合計するか、別々の合計を取得します。すべてのスライダー DIV にクラスを与えてeachから、値を調べるために使用することができます。または、slider_count 変数にアクセスできるので、スライダーの数とその ID を計算できます。

それが役立つことを願っています。

編集：あなたがやりたいと思うことに基づいて以下を追加しました。何が起こっているのかを説明しようと思います。

まず、最初のスライダーを HTML に埋め込まないことで、作業が楽になります。後でスライダーを保持するブロックをそこに置くだけです。

<p>
  <button class="addNew">Add</button>   
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="container">

次に、スライダーを作成する方法が必要です。これを関数にするのは理にかなっています。これは、複数のイベント (ページの読み込みとボタンのクリック) に応答して呼び出されるためです。

function createSlider() {

    // Work out the id for the new slider
    var new_slider_id = 'slider'+createSlider.counter;

    // Create a slider with that id and a common slider class in the container
    $('#container').append("<div class='amount_slider' id='"+new_slider_id+"'></div>");

    // Initialize the new slider 
    $( "#"+new_slider_id ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      change: function() { 
          updateAmount();
      }
    });

    // Update the amount now to take account of the new default value
    updateAmount();

    // Update our unique id count
    createSlider.counter = createSlider.counter + 1;
}

これが呼び出されると、DIV コンテナーに新しいスライダーが作成され、使用したのと同じオプションで初期化されます。カウンターを使用して、各スライダーに異なる ID (ゼロから開始) を与えます。カウンターは、効果的に静的になると、関数の変数として保存されます (JavaScript で実行できます)。グローバル変数も機能しますが、これは少なくともカウンターがその関数によってのみ使用されることを示しています。

この関数はupdateAmount()、スライダーが変更されたときとスライダーを作成した直後の両方で を呼び出します。$100 でスライダーを開始するため、2 番目の呼び出しが必要です。そのため、スライダーの作成時に金額に追加する必要があります。update イベントはchange、あなたが使用slideした の後に発生します。他の何かが基になる値を変更した場合、つまり別のスクリプトでも、変更は機能します。

このupdateAmount()関数は、すべてのスライダーに同じクラスを与えたという事実を利用しているため、jQuery のクラス マッチングとeach関数を使用して、次のようにすべてを処理できます。

function updateAmount() { 
    var new_amount = 0;
    $('.amount_slider').each(function() {
        new_amount = new_amount += $(this).slider('value');
    });
    $( "#amount" ).val( "$" + new_amount );
}

前に言ったように、カウンターの現在の値を知っているので、手動でスライダー ID のリストを作成してそれを使用することもできます。

最後に、ページの読み込み時に最初のスライダーを作成し (カウンターをゼロにすることを忘れないでください。JavaScript では厳密には必要ありませんが、一般的には良い方法です)、作成アクションを追加ボタンに追加して、すべてをまとめます。

// Create the first slider
$(document).ready(function() {
    createSlider.counter = 0;
    createSlider();
});

// Attach the createSlider() action to the 'add' button
$(document).on('click', '.addNew', function() {
    createSlider();
});

これで終わりです。それがやりたいことではない場合は、ロジックがどのように機能するかを確認し、必要に応じて機能するように変更できることを願っています。

于 2013-08-04T07:06:03.963 に答える