Question

我想在simple_form的输入框中显示提示。而单位＆＃34; area_unit＆＃34;选择改变，提示也改变，area_unit可以选择平方米和平方英尺。例如：当area_unit选择sq.m时，surface_area将当前值area_unit显示为sq.m，而提示将值area_unit显示为sq.feet。反之亦然。

苗条的代码：

.col-md-3.col-xs-6
= f.input :surface_area, label: "Surface Area" ,hint:""
.col-md-3.col-xs-6
= f.input :area_unit, collection: Property::AREA_UNIT_NAMES.map(&:reverse), include_blank: false
/ (in \u33A1)

当area_unit改变时，值surface_area也会改变。

  switchUnit: ->
    $(document).on 'change', '#property_area_unit', ->
      areaInput = $('#property_surface_area')
      if $(this).val() == 'sq_m'
        area = Math.round(parseFloat(areaInput.val())*0.0929*100)/100
      else
        area = Math.round(parseFloat(areaInput.val())*10.7639*100)/100
      areaInput.val(area)

但是如何设置内容提示？

Answer 1

你也需要使用Javascript来完成它。原则上，您只需将其添加到<span>事件即可。如果您使用默认的simple_form表单构建器，那么提示字段应该呈现为输入字段本身旁边的 <div class="input string optional property_surface_area field_with_hint"> <label class="string optional" for="property_surface_area">Surface Area</label> <input class="string optional" type="text" value="" name="property[surface_area]" id="property_surface_area" /> <span class="hint"></span> </div>，即在打开源代码时，您应该看到如下内容页面：

span

因此，任务是更新单位选择的change事件中的提示switchUnit: -> $(document).on 'change', '#property_area_unit', -> areaInput = $('#property_surface_area') areaHint = $('.property_area_unit span.hint') if $(this).val() == 'sq_m' area = Math.round(parseFloat(areaInput.val()) * 0.0929 * 100) / 100 areaInOtherUnits = Math.round(area * 10.7639 * 100) / 100 else area = Math.round(parseFloat(areaInput.val()) * 10.7639 * 100) / 100 areaInOtherUnits = Math.round(area * 0.0929 * 100) / 100 areaInput.val(area) areaHint.html('= ' + areaInOtherUnits + ($(this).val() == 'sq_m' ? ' sq feet' : ' sq m'))的值。以下代码执行此操作：

property_surface_area

上面的代码将区域重新计算回其他单位（您可能只使用{{1}}输入中的原始值，但重新计算也会将其舍入）并将提示内容设置为此值，包括其他单位。提示的选择器是：“整个表单行的包装div→带有'提示'类的跨度”。

控制simple_form的提示

1 个答案: