Question

我有一组数字字段。无论在场内是什么数字，我都希望显示相同数量的div。向数字字段添加数字时，应显示另一个div。当从数字字段中减去一个数字时，div应该消失。

这是我的笔记 - 更改被设置为用于测试目的的警报：

$(document).ready(function() {
$('.product-quantity').on('change',function(){
    alert('One of these is changed ' + $(this).attr('data-size'));

    // Using the attributes of $(this), create selector to find input fields with this  
   size, belonging to this product
// If the count of those fields is > than the value we have of this, then we remove
// If it's < than, we add fields
// If it's equal, we do nothing
// we add/remove based on this dymanic selector

});
});

Answer 1

Here就是您所需要的。看一看。注意：更改框中的a值后。您需要在输入外部单击以进行更改。

为你的HTML：

<input class="product-quantity" />
<div id="small-field-set" style='width:100%;min-height:100px;border:1px solid red;'></div>

为你的javascript / jquery：

$(document).ready(function () {
    $('.product-quantity').on('change', function () {
        $('#small-field-set').html('')
        var number = $('.product-quantity').val();
        for (var i = 0; i < number; i++) {
            $('#small-field-set').append('<div style="min-height:10px;border:1px solid blue;">test' + (i + 1) + '</div>')
        }

    });
});

设number是插入输入的数字/值。编辑：我已添加删除值，只要值更改。

Answer 2

由于您正在谈论更改数字，每当您清除输入时，它将被视为更改，我添加了一个按钮，以便您可以在输入后触发更改。

考虑以下html：

<input id="product-quantity" value="0" />
<button id="change"> Change </button>
<div id="divParent"></div>

此代码将添加div而不删除已存在的div，如果您的输入小于已写入的div，则它将仅清除div

$('#change').on('click', function () {

    var input = $('#product-quantity').val() || 0;
    var children=$('#divParent > div').size() || 0;     

    if(input < children){
        $('#divParent').empty();
        children=0;
    }

    for (var i = children+1; i <= input; i++) {
        $('#divParent').append(
        $('<div/>')
            .attr("id", "newDiv" + i)
            .text("hello world " + i));
    }


});

这是fiddle，希望您觉得这很有用。

添加/删除div作为数字字段的计数更改

2 个答案: