связать числовое поле со скрытым div

Question

связать числовое поле со скрытым div

0

У меня есть набор полей ввода чисел, помеченных как small & medium.., так и набор div с меткой small и medium. В моем проекте на самом деле будет больше размеров, чем просто маленький и средний. Когда вы добавляете число в поле ввода небольшого числа, вводится текстовый ввод. После того, как div помечен как маленький. Когда вы вычитаете число из поля ввода небольшого числа, поле ввода текста, которое было недавно добавлено, удаляется.

Если небольшое числовое поле равно 0, я хочу

<div class="name-number-field-container" data-size="Small">

быть скрытым, если небольшое числовое поле больше 0, я хочу, чтобы

<div class="name-number-field-container" data-size="Small">

показывать. То же самое относится к среде.

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

скрытые и показанные правильно, но они не связаны с их надлежащим размером и продуктом. all class= "name-number-field-container" показать

я попробовал это:

$('.product-quantity').on('change', function(){
    var select = $(".name-number-field-container").closest('[id^="product"]').find('[data-size="' + this.name + '"]')
    if($(this).val()>=1){
        $(select).show();
    } else {
        $(select).hide();
    }
});

anmaree 07 янв. 2014, в 20:28

Источник

Теги:

javascript

jquery

3 ответа

1

http://jsfiddle.net/fenderistic/Q4bFB/

В принципе, у вас есть настраиваемое name для каждого product-quantity которое коррелирует с конкретным data-size name-number-field-container. Я должен был добавить атрибут data-output-id чтобы различать разные div. Таким образом, вы используете эту информацию, чтобы скрыть или показать коррелирующие div.

$('.product-quantity').on('change', function () {
    if ($(this).val() >= 1) {
        $(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").show();
    } else {
        $(".name-number-field-container[data-size='" + $(this).attr("name") + "'][data-output-id='" + $(this).attr("data-product-id") + "']").hide();
    }
});

ElliotM 07 янв. 2014, в 17:28

0

номер поля теперь связан с меткой размера, но не связан с продуктом
anmaree 07 янв. 2014, в 19:28
0

@anmaree Хорошо, я обновил код, мне пришлось добавить еще один пользовательский атрибут, чтобы делать то, что вы хотели.
ElliotM 07 янв. 2014, в 19:39
0

он отлично работает в вашей скрипке, но когда я пытаюсь реализовать его в своем проекте, кажется, что он не работает
anmaree 07 янв. 2014, в 19:42
0

о, потому что вы добавили пользовательский атрибут out-out ... зачем вам это нужно?
anmaree 07 янв. 2014, в 19:44
0

Убедитесь, что вы скопировали и вставили новый html, я добавил data-output-id в name-number-field-container
ElliotM 07 янв. 2014, в 19:44
0

Я должен был сделать это, потому что (из того, что я мог видеть) не было никакого другого способа отличить один name-number-field-container от другого, кроме просмотра их атрибутов data-size , даже тогда у вас были дубликаты, поэтому мне нужен способ отличить.
ElliotM 07 янв. 2014, в 19:46

Показать ещё 4 комментария

0

Я просто добавил класс для вашей скрипки, который явно задал ширину для входного класса.name-поля следующим образом:.name-field {width: 50px;} и получил результаты, которые вы искали.

whoopah 07 янв. 2014, в 18:15

Ещё вопросы

номер поля теперь связан с меткой размера, но не связан с продуктом
@anmaree Хорошо, я обновил код, мне пришлось добавить еще один пользовательский атрибут, чтобы делать то, что вы хотели.
он отлично работает в вашей скрипке, но когда я пытаюсь реализовать его в своем проекте, кажется, что он не работает
о, потому что вы добавили пользовательский атрибут out-out ... зачем вам это нужно?
Убедитесь, что вы скопировали и вставили новый html, я добавил data-output-id в name-number-field-container
Я должен был сделать это, потому что (из того, что я мог видеть) не было никакого другого способа отличить один name-number-field-container от другого, кроме просмотра их атрибутов data-size , даже тогда у вас были дубликаты, поэтому мне нужен способ отличить.

Gabriel Littman · Accepted Answer · 2014-01-07T17-09-00.000Z

Это то, что вы имели в виду?

http://jsfiddle.net/9kXLC/4/

Замените код show/hide следующим:

$('.product-quantity').on('change', function () {
    var select = ".name-number-field-container[data-size=" + $(this).attr('name') + ']'
    if ($(this).val() >= 1) {
        $(this).parents('div[id^=product-]').find(select).show();
    } else {
        $(this).parents('div[id^=product-]').find(select).hide();
    }
});

это правильно, но это все еще показывает маленькую этикетку в другом продукте. номер поля теперь связан с меткой размера, но не связан с продуктом
Хорошо, получил лучший ответ сейчас. Не нужно редактировать HTML либо.
это прекрасно работает !! Спасибо
если у вас есть изменения, есть еще одна вещь с этим кодом, но она не связана с показом / скрытием. если вы вводите 4 маленьким (нажмите ввод), а затем 10 маленьким (нажмите ввод), он удаляет все поля имени, почему?
Вы сравниваете строки, а не целые числа inc = parseInt(val) >= parseInt(old); jsfiddle.net/9kXLC/5