0

現時点では、必要に応じて新しいフィールド/スライダーを追加できるフォームを作成しようとしています。ユーザーは自分のスキル名をテキスト ボックスに追加し、そのスキルの現在のレベルをスライダーで選択し、必要に応じて別のスキルを追加することを選択できます。

次に、ユーザーが送信ボタンを押すと、このデータを php ファイルに投稿して残りを処理し、これらの詳細を対応するデータベース テーブルに挿入します。

私は 1 つのテキスト ボックスを表示する次のコードを持っていますが、私は本当に jQuery で無人地帯にいます:

<script>

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

$(document).on('click', '.addNew', function() {
$('#container').append(addSlide);
});  

</script>

<div id="container">  

<button class="addNew">Add</button>  

<form><br><input type="text" name="skill" placeholder="What's your skill?">

<p>
  <label for="amount">Skill Level: 1</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>

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

</form> 

</div>

よろしくお願いします。

4

2 に答える 2

0

本当に必要なのは、クリックして新しいスライダーを DOM に追加できる方法だと思います。オブジェクトを作成するたびに、スライド イベントを再バインドする必要があります。ここに簡単な記事があります：

$.fn.addSlide = function () {
    return this.each(function () {
        var $this = $(this),
            $num = $('.slide').length++,
            $slide = $('<div class="slide" id="slider-' + $num + '"></div>'),
            $amt = $('<input id="amount-' + $num + '" readonly/>');
        $this.append($slide).append($amt);
        $slide.slider({
            value: 1,
            min: 0,
            max: 5,
            step: 1,
            slide: function (event, ui) {
                $amt.val(": " + ui.value);
            }
        });
    });
}

次のように、コンテナで呼び出すだけです。

$(document).on('click', '.addNew', function() {
    $('#container').addSlide();
});

documentまた、より近い静的親セレクターに置き換えてくださいbody。

いつものように、ここに動作するjsFiddleがあります

于 2013-08-04T16:03:32.323 に答える
0

これは、フォームに新しい入力ボックスを追加する方法です。

$(".addNew").click(function(){
   $("form").append("<input type='text'/>");
 });

それらに異なる名前を付ける必要があり、ラベルを運ぶ別の入力もそれぞれに添付する必要があります。現在のスライダーを最後に移動するだけで、毎回新しいスライダーを追加する必要はありません。

デモ JSFIDDLE

于 2013-08-04T16:06:51.977 に答える