Показывать следующую кнопку загрузки после нажатия на предыдущую

Question

У меня есть 4 кнопки, которые позволяют клиенту загружать фотографию в виде одного продукта.

Мне удалось скрыть 3 из 4 кнопок. То, что я хочу достичь, - «Вы нажмете один (выгрузите файл), затем еще раз покажите вверх и т. Д. До 4-й - последняя кнопка«

Это то, что я придумал, нажав на кнопку, все кнопки показывают вверх.

https://jsfiddle.net/th24Lf7d/

jQuery(document).ready(function() { 

jQuery('.form-row.form-row-wide.addon-wrap-8-zdjecie').hide(); 
jQuery('.form-row.form-row-wide.addon-wrap-8-zdjecie').first().show(); 

jQuery('.input-text.addon').on('click', function() { 

    var test = jQuery('.form-row.form-row-wide.addon-wrap-8-zdjecie'); 

    jQuery(test).next().show(); 

}); 

}); 

Answer 1

Попробуйте change событие вместо click события следующим образом.

jQuery(document).ready(function() { 

    jQuery('.form-row.form-row-wide.addon-wrap-8-zdjecie').hide(); 
    jQuery('.form-row.form-row-wide.addon-wrap-8-zdjecie').first().show(); 

    jQuery('.input-text.addon').on('change', function() { 
    jQuery(this).closest("p").next().show(); 
    }); 
}); 

Working Fiddle.

Answer 2

Я создал чистую реализацию, чтобы помочь вам справиться с этой проблемой:

JQuery

$(document).ready(function() { 

    // helpers 
    var amountBtns = 4, 
     currBtn = 1; 

    // hide all btns and show only the first one 
    $('.btn-upload').hide(); 
    $('.btn-upload:nth-child('+ currBtn +')').show(); 

    // event handler 
    $('.btn-upload').on('click', function() { 
     $('.btn-upload:nth-child('+ currBtn +')').hide(); 
     $('.btn-upload:nth-child('+ ++currBtn +')').show();     
    }); 

}); 

HTML

<button class="btn-upload">btn upload 1</button> 
<button class="btn-upload">btn upload 2</button> 
<button class="btn-upload">btn upload 3</button> 
<button class="btn-upload">btn upload 4</button> 

Это работает очень хорошо.