【问题标题】:Remove and append elements on jQuery change function在 jQuery 更改功能上删除和附加元素
【发布时间】:2011-07-20 06:49:50
【问题描述】:

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

$(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?

【问题讨论】:

    标签: php jquery append element


    【解决方案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" });
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-31
      • 2012-07-24
      • 2010-12-11
      • 2014-07-10
      • 2017-01-27
      • 1970-01-01
      相关资源
      最近更新 更多