jquery - jQuery：我需要在每次新点击时在表单中显示连续字段

Question

我有 5 个上传字段，但除了第一个之外，我需要隐藏它们。然后在每次单击时一一显示。

我创建了以下脚本，但似乎 item.show() 没有显示隐藏的 fields.10x

first = $('.webform-client-form').find('div[id$="-ajax-wrapper"]').first();
    first.after('<a id="addmore" href=#>[+] Add more</a>');
    $('.webform-client-form').find('div[id$="-ajax-wrapper"]').each(function(){
            $(this).hide();
            first.show();
    });

    var c = 1;//counter
    $('#addmore').bind('click', function(e) {
        item = $('edit-submitted-file'+c+'-ajax-wrapper');
        item.show();
        ++c;
    if (c == 5) {
      $('#addmore').hide();
      return false;
    }
  });

Answer 1

这不应该：

var item = $('edit-submitted-file'+c+'-ajax-wrapper');

是

var item = $('#edit-submitted-file'+c+'-ajax-wrapper'); //if using id
or
var item = $('.edit-submitted-file'+c+'-ajax-wrapper'); //if using class

Answer 2

您需要添加'#'到选择器的前面，-ajax-wrapper因为您是通过 ID 选择它。

计数器需要从 2 开始，并在 6 上隐藏 addmore。return false(实际上e.preventDefault()应该在该条件之外。

addmore应该添加在文件输入行的最后一行之后，而不是第一行。

Answer 3

只需使用next()函数和:visible选择器

例子：

HTML

<label><span>File</span> <input type="file" /></label>
<label><span>File</span> <input type="file" /></label>
<label><span>File</span> <input type="file" /></label>
...

jQuery

$('label:gt(0)').hide(); // hide all except the first one
$('label:visible').click($(this).next('label').show()); // show the following

:visible没有必要，因为您无法单击隐藏元素，但这只是一种优化。