Question

我在Sale / new.html.erb中的form_for中有一个fields_for，就是这样：

<%= form_for (@sale) do |s| %>

    <%= fields_for :fee, @sale.fee do |f| %>
        <p> Rent : <%= f.number_field :rent %> </p>
        <p> Number of POSs : <%= f.number_field :amt_pos %> </p>
    <% end %>

<%= s.submit %>     
<% end %>

只有当POS数量收到输入时，我才需要显示另一个字段。

<p> POS Tax : <%= f.number_field :pos_tax %> </p>

我知道我必须实现一些JavaScript才能动态执行此操作，但我无法弄清楚如何引用该特定字段

修改标记的答案工作正常，但对于Rails 5（这是我的情况），你必须使用turbo-links。意思是你必须使用

这样：

$(document).on('turbolinks:load', function() {

而不是：

$(document).on('ready', function(){

Answer 1

这可能不是最好的解决方案，但有一种方法可以附加一个jQuery事件，监听你的POS输入字段数量，寻找输入值的变化，然后，如果值是什么的话您正在寻找，取消隐藏您的第三个字段（即将css从display: none;更改为其他字段。

因此，如果您为您的POS输入字段和税收字段提供ID，您可以使用以下内容：

$("#num-of-pos" ).on("input", function() {
  if ($(this).val() != "") {
    $("#pos-tax").css({ "display" : "inline-block" });
  }
});

Answer 2

改变您的DOM：

<%= form_for (@sale) do |s| %>
    <%= fields_for :fee, @sale.fee do |f| %>
        <div>
            Rent : <%= f.number_field :rent %>
        </div>
        <div>
            Number of POSs : <%= f.number_field :amt_pos, class: "toggle-at-input", :"data-toggle-container" => "container-to-display" %>
        </div>
        <div id="container-to-display" style="display:none;">
            POS's Tax : <%= f.number_field :pos_tax %>
        </div>
    <% end %>
    <%= s.submit %>     
<% end %>

在jQuery中：

<script>
    $(document).on('ready', function(){
        $('input.toggle-at-input').on('keyup', function(){
            var $input = $(this),
                $container = $("#" + $input.data('toggle-container'));

            ($input.val() != "") ? $container.fadeIn() : $container.fadeOut(); 
        });
    });
</script>

如果给定字段的值不为空，此代码允许您显示输入。

我没有测试过这段代码，但它应该可行：）

Rails - 如果特定字段收到输入，则显示其他字段

2 个答案: