добавить div на основе значения при вводе числа

0

У меня есть набор полей чисел, каждый из которых имеет класс "product-quantity" и набор пустых div. числовые поля задаются с помощью data-attr small, medium и до 5xl. Пустой div устанавливается с помощью data-attr small, medium и доходит до 5xl, так как поле небольшого числа связано с маленьким div и тем самым одним.

Когда вы увеличиваете или уменьшаете число внутри поля небольшого числа, div "small" следует вставлять после пустого div с малым attr.

Когда вы увеличиваете или уменьшаете число внутри поля номер носителя, div "medium" следует вставлять после пустого div с помощью среды attr.... и так далее

Кроме того, все вышеперечисленное относится к контейнеру продукта x, и на странице имеется несколько продуктов.

У меня есть этот jsfiddle, который имитирует то, что я пытаюсь сделать:

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

однако, прямо сейчас, когда я добавляю/вычитаю число в поля небольшого числа, он добавляет/вычитает div как в пустой малый/средний div, так и в оба продукта. и то же самое для среды.

Мне тяжело пытаться связать, какое числовое поле принадлежит пустому div, принадлежащему тому продукту.

HTML:

<div id="product-1">    
   <div class="size-field">

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

     <div class="name-number-header"><h5>HEADER<h5></div>
         <div class="name-number-field-container" data-size="Small">small:
         </div>
         <div class="name-number-field-container" data-size="Medium">medium:
         </div>
    </div>

<br clear="all">

<div id="product-2">    
   <div class="size-field">

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

     <div class="name-number-header"><h5>HEADER<h5></div>
         <div class="name-number-field-container" data-size="Small">small:
         </div>
         <div class="name-number-field-container" data-size="Medium">medium:
         </div>
    </div>

ЯШ:

$('.product-quantity').on('change',function(){
    $('.name-number-field').remove();
        var val = $(this).val();
    for (var i = 0; i < parseInt(val); i++){
        $('<div/>',{'class':'name-number-field'}).insertAfter($("[data-size]"));
    }
});
  • 3
    Вы должны начать с закрытия тегов H5
Теги:

2 ответа

2
Лучший ответ
$('.product-quantity').on('change', function () {
    var val = $(this).val(),
        ele = $(this).closest('[id^="product"]').find('[data-size="'+this.name+'"]');

    ele.nextUntil('[data-size]').remove();

    for (var i = 0; i < parseInt(val); i++) {
        $('<div/>', {
            'class': 'name-number-field'
        }).insertAfter(ele);
    }
});

FIDDLE

РЕДАКТИРОВАТЬ:

Основываясь на комментариях, то, что вы действительно пытаетесь сделать, это просто добавить один, если значение увеличивается, и удалить последнее, если значение уменьшится, и для этого подход будет несколько иным:

$('.product-quantity').each(function() {
    $(this).data('val', this.value);
}).on('change', function () {
    var val = $(this).val(),
        old = $(this).data('val'),
        ele = $(this).closest('[id^="product"]').find('[data-size="'+this.name+'"]'),
        inc = val >= old;

    if (inc) {
        $('<div/>', {
            'class': 'name-number-field'
        }).insertAfter(ele);
    }else {
        $('.name-number-field', ele.parent()).last().remove();
    }

    $(this).data('val', this.value);
});

FIDDLE

Поделиться
  • 0
    это очень близко, однако это не удаляет их, когда число вычитается
  • 0
    о, я переместил аргумент удаления вверх на строку, и это работает!
Показать ещё 11 комментариев
0

Сделайте использование своего data-product-id и перетащите его в текстовое поле и настройте нужные элементы.

Попробуй это,

$('.product-quantity').on('change',function(){
    $('.name-number-field').remove();
            var val = $(this).val();

    for (var i = 0; i < parseInt(val); i++){
        $('<div/>',{'class':'name-number-field'})
        .insertAfter($(this).parents('#product-' + $(this).data('product-id')).find("[data-size]"));
    }
});

DEMO

Редактировать:

$('.product-quantity').on('change',function(){
    $('.name-number-field').remove();
            var val = $(this).val();

    for (var i = 0; i < parseInt(val); i++){
        $('<div/>',{'class':'name-number-field'})
        .insertAfter($(this).parents('#product-' + $(this).data('product-id')).find("[data-size='"+ $(this).attr('name') +"'][data-size]"));
    }
});

NEW - DEMO

Поделиться
  • 0
    поле малого числа добавляет div после небольшого пустого div и среднего пустого div. поле малого числа должно ассоциироваться только с небольшим пустым div, а поле среднего числа должно ассоциироваться со средним пустым div

Ещё вопросы

Сообщество Overcoder
Наверх
Меню