前のボタンをクリックした後、次のアップロードボタンを表示

Question

私は1つの製品ビューで写真をアップロードできる4つのボタンがあります。

これまで4つのボタンのうち3つを隠すことができました。私が達成したいのは、「あなたは1つをクリックして（ファイルをアップロードして）、次に別のものが表示されます.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

次のようにclickイベントの代わりにchangeイベントをお試しください。

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> 

それはかなり正常に動作しています。