Javascript 按按钮显示文本框-Jquery rails

Javascript 按按钮显示文本框-Jquery rails,javascript,jquery,ruby-on-rails,haml,Javascript,Jquery,Ruby On Rails,Haml,我这里有jquery: $(".cellphone-add").on "click", (e) -> if $(".cellphone2").show == true $(".cellphone3").removeClass('hidden') return false if $(".cellphone3").show == true $(".cellphone4").removeClass('hidden') retur

我这里有jquery:

  $(".cellphone-add").on "click", (e) ->
    if $(".cellphone2").show == true
      $(".cellphone3").removeClass('hidden')
      return false
    if $(".cellphone3").show == true
      $(".cellphone4").removeClass('hidden')
      return false
    if $(".cellphone4").show == true
      $(".cellphone5").removeClass('hidden')
      return false
    $(".cellphone2").removeClass('hidden')
    return false
    e.preventDefault()
    return false
这是我的观点:

    .row
      .pull-right.container
        .btn.btn-success.btn-xs.cellphone-add
          Add another field?
    .cellphone2.input-group.hidden
      = f.text_field :cellphone_2, class: 'char-max-length form-control', :maxlength => 11, :id => "cellphone-value-2"
      %span.input-group-btn
        .actions
          %a#cr2.btn.cellphone-remove.btn-xs.btn-link{:href => "#"}
            %i.icon-remove
    .cellphone3.input-group.hidden
      = f.text_field :cellphone_3, class: 'char-max-length form-control', :maxlength => 11, :id => "cellphone-value-3"
      %span.input-group-btn
        .actions
          %a#cr3.btn.cellphone-remove.btn-xs.btn-link{:href => "#"}
            %i.icon-remove
    .cellphone4.input-group.hidden
      = f.text_field :cellphone_4, class: 'char-max-length form-control', :maxlength => 11, :id => "cellphone-value-4"
      %span.input-group-btn
        .actions
          %a#cr4.btn.cellphone-remove.btn-xs.btn-link{:href => "#"}
            %i.icon-remove
    .cellphone5.input-group.hidden
      = f.text_field :cellphone_5, class: 'char-max-length form-control', :maxlength => 11, :id => "cellphone-value-5"
      %span.input-group-btn
        .actions
          %a#cr5.btn.cellphone-remove.btn-xs.btn-link{:href => "#"}
            %i.icon-remove
我要做的是一个接一个地显示我的文本框

例如,我单击一次按钮“添加另一个字段?”就会显示
mobile_2
div。然后我再次单击它,第二个文本框将显示。就这样。我在view上的代码还可以,但我知道我的jquery有问题


谢谢!请提供帮助。

删除隐藏类时,只需调用第一个隐藏元素并在每次单击时显示它:

$(".cellphone-add").on "click", (e) ->
  $(".input-group.hidden").first().show().removeClass "hidden"