在 jQuery 更改函数上删除和追加元素

Question

我们使用以下代码在文本更改上附加更多输入元素：

$(document).ready(function() {
$('#instal').change(function() {
    var instalval = parseInt($(this).val());
    if(instalval != '') {
    for( i = 0; i < instalval; i++) {
        $('#fields').append(' <li class="inputs clearfix"><input type="text" class="small" size="30" name="date" placeholder="Date" /> <input type="text" class="small" size="30" name="amount" placeholder="Amount" /> <span title="Remove this" class="ui-icon ui-icon-closethick closefield"></span> </li>');
    }
    }  
});
$('.closefield').live('click', function() {
$(this).parent().remove();
});
});

我们使用 html5 input type="number" 作为值，但是如果我们选择 6，它会添加 6 个元素，之后如果我们选择 12，它会在最后添加的 6 的基础上添加 12元素，因此总计元素将是 18 而不是 12（选择 12 时），那么我们如何修复代码来实现此目的，以及如果我们在选择 12 后再次选择 6 会怎样，我希望这是有意义的。谢谢。

即使你可以帮助我们如何使用 php 将其发布到 mysql ？

Answer 1

您可以在回调的开头放置一个 if 语句，以检查 #fields 元素的子元素是否具有类 inputs。如果是，则将其删除。

$(document).ready(function() {
$('#instal').change(function() {
    if($('#fields').children().hasClass('inputs')) {
        $('.inputs').remove();
    }
    var instalval = parseInt($(this).val());
    if(instalval != '') {
        for( i = 0; i < instalval; i++) {
            $('#fields').append(' <li class="inputs clearfix"><input type="text" class="small" size="30" name="date" placeholder="Date" /> <input type="text" class="small" size="30" name="amount" placeholder="Amount" /> <span title="Remove this" class="ui-icon ui-icon-closethick closefield"></span> </li>');
            $(function() {
                 $( ".small" ).datepicker({ minDate: "+" + i.toString() + "M" });
            });
        }
    }  
});

$('.closefield').live('click', function() {
    $(this).parent().remove();
 });

这是用于 jQuery UI 日期选择器：

$(function() {
    $( ".date" ).datepicker();
});

这是用于修复日期范围：

$(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});