简单形式将 class 添加到周围的 div

Question

我正在为简单表单编写自定义包装器：

## Inputs
b.wrapper tag: :div, class: 'col-lg-4 input-group' do |component|
  component.use :input, class: 'form-control'
  component.wrapper tag: :span, class: 'input-group-addon' do |icon|
    icon.wrapper :icon, tag: :i do
    end
  end
end

生成 HTML：

<div class="string optional q_post_date_gteq">
 <div class="col-lg-4 input-group">
  <input class="string optional datepicker form-control" placeholder="Start" type="text" name="q[post_date_gteq]" id="q_post_date_gteq">
  <span class="input-group-addon"><i class="icon-calendar"></i></span>
 </div>
</div>

<div class="string optional q_post_date_gteq"> 似乎是自动生成的。我想给它加一个class，这怎么可能？

Answer 1

如果您无法仅使用 ruby 找到答案，这可以解决问题：

$(document).ready(function() {
  $(".q_post_date_gteq").addClass("...");
});

编辑：

回复评论：添加一个 "wrapper" 这样你就有了这样的东西

<div class="simple-form-wrapper">
    <div class="string optional q_post_date_gteq">
     <div class="col-lg-4 input-group">
      <input class="string optional datepicker form-control" placeholder="Start" type="text" name="q[post_date_gteq]" id="q_post_date_gteq">
      <span class="input-group-addon"><i class="icon-calendar"></i></span>
    </div>
  </div>
</div>

现在，jQuery 部分变为：

$(document).ready(function() {
  $(".simple-form-wrapper").children.first.addClass("...");
});

Answer 2

默认情况下，简单表单会在输入和标签周围生成一个包装器 div。我知道有两种方法可以为您的自定义包装器配置 html 选项。

1.您可以将 wrapper_html 选项传递给模板中的表单构建器：

f.input :some_property_name, wrapper_html: { class: 'your-class' }

2。定义自定义包装器时将 class 选项传递给 wrappers：

config.wrappers :your_wrapper_name, class: 'your-class' do |b| ...

有一些关于定义自定义包装器的很棒的文档，以备您需要更多帮助！ https://github.com/plataformatec/simple_form/wiki/Custom-Wrappers

简单形式将 class 添加到周围的 div

simple form add class to surrounding div

ruby-on-rails

simple-form