Question

目前我正在尝试创建一个表单，您可以根据需要添加新字段/滑块。此人可以将他们的技能名称添加到文本框中，然后在滑块上选择他们使用该技能的级别，然后他们可以根据需要选择添加其他技能。

然后，当用户点击提交按钮时，我想将这些数据发布到php文件，在那里我将能够处理其余部分并将这些细节插入到它们对应的数据库表中。

我有以下代码显示一个文本框但我真的没有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>

提前致谢，希望你能帮忙!!

Answer 1

我认为您真正想要的是一种方法，您可以在其中单击并将新的滑块添加到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。

As usual, here's a working jsFiddle

Answer 2

这是您向表单添加新输入框的方法。

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

你必须给它们不同的名字，并且每个都附加另一个输入，它们会带有标签。您不需要每次都添加一个新的滑块，只需将当前的滑块移动到最后。

<强> DEMO JSFIDDLE

我希望能够在单击按钮时动态添加新的快照以增加滑块？

2 个答案: