以軌道形式定位嵌套字段的ID

我正在使用dependent-fields-rails gem來顯示/隱藏窗體中的字段。大多數情況下，它的運作非常好！然而，我很難搞清楚如何定位嵌套的字段，因爲dependent-fields-rails需要一個ID來定位（CSS/JS意義上的ID），而這些標識符我不知道如何預測/編碼。以軌道形式定位嵌套字段的ID

例如：

用戶擁有多個信用卡。我希望能夠顯示美國各州或加拿大省份，具體取決於用戶在輸入信用卡賬單地址時爲該字段選擇的值。

<%= bootstrap_form_for(@user) do |f| %> 
...user info fields... 
<div> 
     <%= f.fields_for :credit_cards do |card| %> 
      <%= render 'shared_partials/credit_card_fields', f: card %> 
     <% end %> 
     <%= link_to_add_association 'Add Credit Card', f, :credit_cards, partial: 'shared_partials/credit_card_fields' %> 
     </div> 
    <%= f.submit "Save and Submit" %> 
<% end %>

在信用卡部分：

<div class="nested-fields"> 
     <%= f.text_field :card_holder_first_name, :label => "Card Holder First Name" %> 
     <%= f.text_field :card_holder_last_name, :label => 'Card Holder Last Name' %> 
     <%= f.select :card_type, ["Master Card", "American Express","VISA"] %> 
     <%= f.text_field :card_number, :label => 'Card Number', placeholder: 'Must be 15 or 16 digits long.' %> 
     <%= f.text_field :ccv, :label => 'CCV Number' %> 
     <%= f.date_select :expiration_date, as: :date_select, order: [:month, :year] %> 
     <%= f.select :country, [["USA", "USA"],["Canada","Canada"]] %> 
     <%= f.text_field :street_address %> 
     <%= f.text_field :city %> 
     <div class="js-dependent-fields" data-select-id='user_credit_cards_attributes_country' data-option-value='USA'> 
     <%= f.select :state, us_states %> 
    </div>

<%= f.text_field :zip %> 
     <%= link_to_remove_association "Remove Credit Card", f %> <br> 
     <hr /> 
    </div>

這裏的問題是，我無法弄清楚如何定位國家選擇字段的ID。你可以看到我嘗試過「user_credit_cards_attributes_country」，但這不起作用。當我查看源代碼時，ID是這樣的：id =「user_credit_cards_attributes_1467770518320_country」中間的數字每次都會改變。我知道這是因爲我在fields_for上下文中執行此操作，但我不知道如何定位這種動態ID。想法？

來源

2016-07-06 nilatti

最簡單的解決方法就是添加自定義屬性class，你再使用你的CSS/JS，所以像：

<%= f.select :country, [["USA", "USA"],["Canada","Canada"]], class: 'country-dropdown' %>

這應該爲您提供可預測的選擇.country-dropdown。

來源

2016-07-28 02:57:43 justis

以軌道形式定位嵌套字段的ID

回答

相關問題