javascript - 选择类别然后显示类别.尺寸

Question

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

Javascript 对此不起作用。用户可以选择一个类别，但尺寸不会下拉。谁能明白为什么吗？我了解 Rails，但不懂 JS。

当我检查 View 时，我可以在 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

首先，在 View 中包含自定义 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 中，您应该始终以某种方式绑定(bind)到 DOM 加载事件:

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

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