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">似乎是自动生成的。我想为它添加一个类，这怎么可能？

Answer 1

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

<强> 1。您可以将wrapper_html选项传递到模板中的表单构建器：

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

<强> 2。定义自定义包装时，将类选项传递给wrappers：

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

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

Answer 2

如果你只使用红宝石找不到答案，这可以解决问题：

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

编辑：

回答评论：添加一个“包装器”，这样你就有了这样的东西

<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("...");
});

简单的表单将类添加到周围的div

2 个答案: