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

目前我正在尝试创建一个表单，您可以根据需要添加新的字段/滑块。该人能够将他们的技能名称添加到文本框中，然后在滑块上选择他们使用该技能的哪个级别，然后他们可以选择添加其他技能（如果他们喜欢的话）。想要在单击按钮时能够动态添加新的快照以增加滑块？

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

在此先感谢，希望能帮到你！

来源

2013-08-04 AyeTry

您已经添加了jQuery和jQuery UI的链接到您的网页？ –

是的，他们在我的header.php文件，每个页面上，所以他们肯定工作。 – AyeTry

@OptimusPrime你有什么想法可能是什么问题？ – AyeTry

我觉得你真正想要的是一种方法，你可以点击并添加新的滑块到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。

来源

2013-08-04 16:03:32 Ohgodwhy

这是如何添加一个新的输入框的形式。

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

你必须给他们不同的名字，并且还具有连接到每个另一个输入，将携带标签来。每次只需将当前的一个移动到最后，就不需要添加新的滑块。

DEMO JSFIDDLE

来源

2013-08-04 16:06:51

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

回答

相关问题