Question

我有一组带有产品数量类的数字字段。当我在输入字段中添加一个数字时，div类name-number-field应该出现在class name-number-header之后。当从字段中取出一个数字时，应删除最后一个名称 - 字段字段。

当val = 8且size = 0时，应添加8 div 当val = 8且size = 3时，应添加5个div

这是我想出来的，但我被困了

$(document).ready(function() {
$('.product-quantity').on('change',function(){
    selector = "#product-"+$(this).attr('data-product-id')+
    "[data-size-field='"+$(this).attr('data-size') +"']";
if ($(this).val > $(selector).size) {
    for (var i = 0; i < (val-size); i++){
        $('.size-field').insertAfter($(".name-number-header"));
    }
}
if ($(this).val < $(selector).size) {
    for (var i = 0; i < (size-val); i++){
        $('.size-field :last').remove();
    }
}
});
});

http://s24.postimg.org/x4njd7r44/Screen_Shot_2013_12_12_at_6_03_47_PM.jpg

这是一个链接到html检查的屏幕截图^^^^^^^^^^^^^^^^^

HTML：

 <div class="size-column">

 <div class="size-field">
    <div id="size-label"></div>
    <div class="number-input">
        <input id="XSmall" class="product-quantity" type="number" name="XSmall" min="0" 
 max="9999" data-size="XSmall" data-product-id="1"></input>
    </div>
</div>
<div class="size-field">
    <div id="size-label"></div>
    <div class="number-input">
        <input id="Small" class="product-quantity" type="number" name="Small" min="0" 
 max="9999" data-size="Small" data-product-id="1"></input>
    </div>
</div>
<div class="size-field">
    <div id="size-label"></div>
    <div class="number-input">
        <input id="Medium" class="product-quantity" type="number" name="Medium" min="0" 
 max="9999" data-size="Medium" data-product-id="1"></input>
    </div>
</div>

....高达5xl

<div class="name-number-form" data-switch="1" style="display: none;">

<div class="name-number-header"></div>
<div id="number-field-set">
    <div class="name-number-field" data-size="XSmall">
    </div>
    <div class="name-number-field" data-size="Small">
    </div>
    <div class="name-number-field" data-size="Medium">
    </div>

......最多5xl

编辑代码：

$(document).ready(function() {
$('.product-quantity').on('change',function(){
selector = "#product-"+$(this).attr('data-product-id')+
" [data-size-field='"+$(this).attr('data-size') +"']";
var val = $(this).val();
var size =  $(selector).size();
if (val > size) {
for (var i = 0; i < (val-size); i++){
    $('hi').insertAfter($(".name-number-header"));
}
}
if (val < size) {
for (var i = 0; i < (size-val); i++){
    $('.name-number-field :last').remove();
}
}
});

}）;

我创造了一个模仿我想要做的事情的小提琴。我不想要的是在第一列中添加和删除div的第二个输入。

http://jsfiddle.net/7PhJZ/19/

Answer 1

$('.size-field').insertAfter($(".name-number-header"));

搜索类size-field的元素。

如果我正确理解了你的问题，你想创建新的size-field div并附加它们。如果是这样，那就试试吧：

$('<div/>',{'class':'size-field'}).insertAfter($(".name-number-header"));

这会创建一个包含课程size-field的新div，并在.name-number-header之后添加。

根据字段中的值减去属性的大小，在div之后插入div

1 个答案: