Question

您好我有一个表单来创建产品。用户应该能够选择类别（例如T恤），然后T恤的所有尺码（例如S，M，L）都应该下拉。用户可以输入每种尺寸的数量。

Javascript并不适用于此。用户可以选择类别，但尺寸不会下降。谁能明白为什么？我知道Rails，但我不认识JS。

当我检查视图时，我可以在HTML中看到尺寸存在。

这是我的观点

<%= javascript_include_tag "custom" %>
<div class="container">
  <div class=“row”>
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-primary">
        <div class="panel-body">
          <%= simple_form_for @product_form, as: :product_form, url: products_path do |f| %>
            <%= f.collection_select :category_id, @categories, :id, :name, include_blank: true, :prompt => "Select One Category" %>
            <% @categories.each do |category| %>
              <div class='sizes_container' id ='sizes_container_for_<%= category.id %>'>
                <% category.sizes.each do |size| %>
                  <%= f.hidden_field :size_id, value: size.id %>
                  <%= size.title %>
                  <%= f.input :quantity %>
                <% end %>
              </div>
            <% end %>
            <%= f.input :title, label:"Title"%>
            <%= f.input :price, label:"Price"%>
            <%= f.input :description,label:"Description" %>
            <%= f.input :tag_list,label:"Tags - Seperate tags using comma ','. 5 tags allowed per product" %>
            <%= f.button :submit, "Create new product", class: "btn-lg btn-success" %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>

这是JS

this.products = {
  updateCategory: function() {
    var id = $('#product_category_id').val();
    $('.sizes_container').hide();
    $('#sizes_container_for_' + id).show();
  }
};

$(function() {
  products.updateCategory();
  $('#product_category_id').on('change', products.updateCategory);
});

Answer 1

首先，您在视图中包含自定义JavaScript是一个不好的迹象：

<%= javascript_include_tag "custom" %>

这应该在你正在使用的布局中：

#app/views/layouts/application.html.erb
<%= javascript_include_tag :application, :custom %>

虽然你所做的事情没有任何问题，但这是不好的做法（将你的JS分散到你的应用程序中）。此外，如果您想要真正高效，您可以将代码放入app/assets/javascripts/application.js文件中：

#app/assets/javascripts/application.js
$('document').on('change', 'select#product_category_id', function(e){
    var id = $(this).val();
    $('.sizes_container').hide();
    $('#sizes_container_for_' + id).show();
});

我也认为为此创建一个类有点过分。你最好把代码放到上面的函数中。

-

考虑到您的HTML是正确的，上述应该可行。另一个重要的注意事项是，在Rails中，您应该始终以某种方式绑定到DOM加载事件：

$(document).ready(function(){
$(document).on("page:load" ...

这主要是Turbolinks的问题，但也比使用$(function...更好。

选择Category然后显示Category.sizes

1 个答案: