按按钮显示文本框 - Jquery rails答案

【问题标题】：Showing textbox by button - Jquery rails按按钮显示文本框 - Jquery rails
【发布时间】：2015-01-22 08:29:54
【问题描述】：

我这里有 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

我要做的是一个一个地显示我的文本框。

例如，我单击一次按钮“添加另一个字段？”和cellphone_2 div 将显示。然后我再次单击它，将显示第二个文本框。就这样。我的代码正常，但我知道我的 jquery 有问题。

谢谢！请帮忙。

【问题讨论】：

标签： javascript jquery ruby-on-rails haml

【解决方案1】：

只需调用第一个隐藏元素并在每次点击时显示它，同时移除隐藏类：

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

【讨论】：