Question

我有4个按钮，允许客户在单个产品视图中上传照片。

到目前为止，我已经设法隐藏了4个按钮中的3个。我想要实现的是“你点击一个（上传一个文件）然后另一个显示等等直到第4个 - 最后一个按钮”

这就是我提出的，到目前为止点击一个按钮会显示所有按钮。

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>

它的工作非常好。

单击上一个按钮后显示下一个上传按钮

2 个答案: