如何解决简单的表单集合插入图像覆盖了我的wrapper_html
我正在创建一个表单,该表单是一个具有多个选项的复选框,其中包含图像,它是一个复选框,具有多个选项(应用程序,网站,平台和其他),当用户选择“其他”选项时,我希望这样做,则会出现带有文本区域的javascript来描述该选项。
最大的问题是,正如我在StackOverflow上的其他示例中所看到的那样,我试图通过集合发送图像,现在img div
被保存在我的后端作为值(不需要),并且正在更改视图的HTML div,这使得之前运行的javascript不再打开文本区域了。
这是生成我的simple_form的代码。
class MultipleChoicesInput < SimpleForm::Inputs::CollectionCheckBoxesInput
def input(wrapper_options)
collection = options[:collection]
label_method = :to_s
value_method = :to_s
collection_options = {
collection_wrapper_tag: 'div',collection_wrapper_class: 'multiple-choices',item_wrapper_tag: false
}
@builder.collection_check_boxes(attribute_name,collection,value_method,label_method,collection_options) do |b|
b.check_box(class: 'd-none choice_input') + b.label(class: 'choice')
end
end
def input_type
'check_boxes'
end
end
这是我在视图中使用的输入之一
<%= o.input :demand,label: "QUAL O ESCOPO DO PROJETO?",as: :multiple_choices,wrapper_html: { id: 'briefing_demand_outro' },collection: Briefing::DEMANDS %>
简报模型中的需求:
DEMANDS = ["<img class='form_icon' src='/assets/icons/site.png'>
<div class='form_text'>Site</div>".html_safe,"<img class='form_icon' src='/assets/icons/ecommerce.png'>
<div class='form_text'>E-Commerce</div>".html_safe,"<img class='form_icon' src='/assets/icons/marketplace.png'>
<div class='form_text'>Marketplace</div>".html_safe,"<img class='form_icon' src='/assets/icons/plataform.png'>
<div class='form_text'>Plataforma</div>".html_safe,"<img class='form_icon' src='/assets/icons/app.png'>
<div class='form_text'>Aplicativo</div>".html_safe,"<img class='form_icon' src='/assets/icons/crm.png'>
<div class='form_text'>CRM</div>".html_safe,"<img class='form_icon' src='/assets/icons/others.png'>
<div class='form_text'>Outro</div>".html_safe]
这是我的div在后台和后端发生的情况: 简单表单集合值(其中包含div)如何生成div的图像:
后端也保存了divs
这是我正在创建的表单:
所以最大的问题是,我不想将div发送到集合中,我需要在标签 b.label(class:'choice')中创建它,并且我可以找不到将我的图片嵌套在此标签内的语法,因此ID名称将与以前相同,以使我的JavaScript再次正常工作,并且div不会保存在后端内。
@builder.collection_check_boxes(attribute_name,collection_options) do |b|
b.check_box(class: 'd-none choice_input') + b.label(class: 'choice')
end
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。