Question

在我的应用中，我有一个提供商列表，每个提供商都有类别。我的模型如下：

class Categorization < ApplicationRecord
  belongs_to :category
  belongs_to :provider
end

class Category < ApplicationRecord
  has_many :categorizations
  has_many :providers, through: :categorizations
  accepts_nested_attributes_for :categorizations
end

class Provider < ApplicationRecord
  has_many :categorizations
  has_many :categories, through: :categorizations
  accepts_nested_attributes_for :categorizations
end

在视图中，我有2个ul列表。第一个是提供者列表，第二个是类别列表。它看起来像：

<ul class="nav nav-justified nav-carousel upper-thumbs">
    <% Provider.order(created_at: :asc).take(6).each_with_index do |provider, index| %>
      <li id="<%= provider.name %>_<%= index + 1 %>" class="btn-up"><a data-href="#"><%= provider.name %></a></li>
    <% end %>
</ul>

<ul id="parent" class="nav nav-justified nav-carousel left-thumbs">
    <% Category.order(created_at: :asc).take(7).each_with_index do |category, index| %>
      <li id="aside_<%= index + 1 %>" class="btn-aside"><i class="category_image" style="background: url(<%= category.cat_image %>) no-repeat;"></i><a data-href="#"><%= category.name %></a></li>
    <% end %>
</ul>

当我没有执行rails时，当我点击提供者时（它也被硬编码，也就是类别），我可以看到，类别被过滤了。它是由js制作的：

var $btns = $('.btn-up').click(function () {
      if(this.id == 'a') {
          $('#parent > li#aside_1').fadeIn(450);
          $('#parent > li').not($('#parent > li#aside_1')).hide();
      } else {
          var $el = $('.' + this.id).fadeIn(450);
          $('#parent > li').not($el).hide();
      }
      $btns.removeClass('active');
      $(this).addClass('active');
  })

所以，问题是如何使过滤器工作，所以当我点击一个提供者时，它只显示属于该提供者的类别？感谢。

Answer 1

Ajax是做这类事情的最佳方式。

离。

xpath=//div[span[contains(text(), "${SelectOrder}")]]/button

<强> SomeContoller.rb

var $btns = $('.btn-aside').click(function () {
var provider_id = 'get selected provider via JS'   
$.ajax({
  type: "POST",
  url: "/some_url_of_controller_method",
  data: {
    provider: provider_id
  },
  success: function(data) {
    $('.btn-up').empty()
    $.each(data, function(){
    $('.btn-up').append('<option value="'+ this.value +'">'+ this.name  +'</option>')
)
  },
  error: function(data) {
    return false;
  }
    });
})

Answer 2

因此，您可以采取一种方法来实现这一目标。

每次单击提供程序以获取其关联类别并使用JQuery将其附加到HTML时，您都可以发送AJAX请求。

这里的代码非常详细，因此我建议您浏览一下这段视频，了解它是如何工作的，并以适合您的方式实现它。

Ryan Bates在下面的视频中很好地解释了这个概念。

https://www.youtube.com/watch?v=FBxVN7U1Qsk

过滤类别

2 个答案: