简单的表单集合插入图像覆盖了我的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 (将#修改为@）