0

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

然后，当用户点击提交按钮时，我想将此数据发布到一个 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>

先谢谢了，希望能帮到你！！

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 回答