根据更改输入值

时间:2014-08-01 06:00:36

标签: javascript jquery ruby-on-rails coffeescript

在我的Ruby on Rails应用程序中,我有汽车价格表。该表具有以下输入:

  • Car from_days
  • Car to_days
  • Car netto_price
  • Car brutto_price

我有以下HTML代码(我将其转换为HAML以便更具可读性)

%table.table.table-striped.table-bordered
  %thead
    %tr
      %th
        Od [Liczba dni]
      %th
        Do [Liczba dni]
      %th
        Cena netto
      %th
        Cena brutto
      %th
  %tbody#prices
    %tr.nested-fields
      %td
        .form-group.integer.optional.car_prices_from_days
          %input#car_prices_attributes_0_from_days.numeric.integer.optional.form-control.form-control{name: "car[prices_attributes][0][from_days]", step: "1", type: "number", value: "1"}/
      %td
        .form-group.integer.optional.car_prices_to_days
          %input#car_prices_attributes_0_to_days.numeric.integer.optional.form-control.form-control{name: "car[prices_attributes][0][to_days]", step: "1", type: "number", value: "12"}/
      %td
        .form-group.string.optional.car_prices_netto_price
          %input#car_prices_attributes_0_netto_price.string.optional.form-control{min: "0", name: "car[prices_attributes][0][netto_price]", type: "text", value: "123,00"}/
      %td.brutto
        .form-group.string.optional.car_prices_brutto_price
          %input#car_prices_attributes_0_brutto_price.string.optional.form-control{min: "0", name: "car[prices_attributes][0][brutto_price]", type: "text", value: "151,29"}/
      %td.remove
        %input#car_prices_attributes_0__destroy{name: "car[prices_attributes][0][_destroy]", type: "hidden", value: "213"}/
        %a.delete.remove_fields.existing{href: "#", style: "display: none;"}
          %span.glyphicon.glyphicon-remove
    %input#car_prices_attributes_0_id{name: "car[prices_attributes][0][id]", type: "hidden", value: "213"}/
    %tr.nested-fields
      %td
        .form-group.integer.optional.car_prices_from_days
          %input#car_prices_attributes_1406871212209_from_days.numeric.integer.optional.form-control.form-control{name: "car[prices_attributes][1406871212209][from_days]", step: "1", type: "number"}/
      %td
        .form-group.integer.optional.car_prices_to_days
          %input#car_prices_attributes_1406871212209_to_days.numeric.integer.optional.form-control.form-control{name: "car[prices_attributes][1406871212209][to_days]", step: "1", type: "number"}/
      %td
        .form-group.string.optional.car_prices_netto_price
          %input#car_prices_attributes_1406871212209_netto_price.string.optional.form-control{min: "0", name: "car[prices_attributes][1406871212209][netto_price]", type: "text", value: "0,00"}/
      %td.brutto
        .form-group.string.optional.car_prices_brutto_price
          %input#car_prices_attributes_1406871212209_brutto_price.string.optional.form-control{min: "0", name: "car[prices_attributes][1406871212209][brutto_price]", type: "text", value: "0,00"}/
      %td.remove
        %input#car_prices_attributes_1406871212209__destroy{name: "car[prices_attributes][1406871212209][_destroy]", type: "hidden", value: "false"}/
        %a.delete.remove_fields.dynamic{href: "#"}
          %span.glyphicon.glyphicon-remove

现在我想建立这样的功能:

  • 当其中一个netto_price输入发生变化时,将其最接近的brutto_price输入设置为((netto_price * 0.23)+ netto_price)
  • 当其中一个brutto_price输入发生变化时,将其最接近的netto_price输入设置为(brutto_price - (netto_price * 0.23)

我会非常感谢任何帮助,因为我已经卡住了......

我的代码:

  $("input#car_prices_attributes_0_netto_price").change ->
    value = (@.value * 0.23)
    brutto = $("input#car_prices_attributes_0_netto_price").closest($('[id*="brutto_price"]'))
    brutto.val(value)

我只是尝试在netto_price输入时执行此操作,以便在netto_price_input更改时更新brutto_price输入。但我对这个最接近的方法有疑问。它无法正常工作。

编辑: 任何人都可以根据netto_price输入值修改我的代码来设置brutto_price输入值吗?

1 个答案:

答案 0 :(得分:1)

以下是您的答案,您需要向tdnetto字段的父brutto添加课程,如代码所示。

%table.table.table-striped.table-bordered
  %thead
    %tr
      %th Od [Liczba dni]
      %th Do [Liczba dni]
      %th Cena netto
      %th Cena brutto
      %th
  %tbody#prices
    %tr.nested-fields
      %td
        .form-group.integer.optional.car_prices_from_days
          %input#car_prices_attributes_0_from_days.numeric.integer.optional.form-control.form-control{class: "/>{name:"}>/
          [prices_attributes][0][from_days] ", step: "1 ", type: "number ", value: "1 "}/
      %td
        .form-group.integer.optional.car_prices_to_days
          %input.numeric.integer.optional.form-control.form-control{id: "car_prices_attributes_0_to_days "}>/
          {name: "car[prices_attributes][0][to_days] ", step: "1 ", type: "number ", value: "12 "}/
      %td.netto
        .form-group.string.optional.car_prices_netto_price
          %input.string.optional.form-control{id: "car_prices_attributes_0_netto_price "}>/
          {min: "0 ", name: "car[prices_attributes][0][netto_price] ", type: "text ", value: "123,00 "}/
      %td.brutto
        .form-group.string.optional.car_prices_brutto_price
          %input.string.optional.form-control{id: "car_prices_attributes_0_brutto_price "}>/
          {min: "0 ", name: "car[prices_attributes][0][brutto_price] ", type: "text ", value: "151,29 "}/
      %td.remove
        %input{id: "car_prices_attributes_0__destroy "}>/
        {name: "car[prices_attributes][0][_destroy] ", type: "hidden ", value: "213 "}/
        %a.delete.remove_fields.existing
          {href: "# ", style: "display: none; "}
          %span.glyphicon.glyphicon-remove
    = succeed "{name:" do
      %input{id: "car_prices_attributes_0_id "}/
    %tr.nested-fields
      %td
        .form-group.integer.optional.car_prices_from_days
          %input.numeric.integer.optional.form-control.form-control{id: "car_prices_attributes_1406871212209_from_days "}>/
          {name: "car[prices_attributes][1406871212209][from_days] ", step: "1 ", type: "number "}/
      %td
        .form-group.integer.optional.car_prices_to_days
          %input.numeric.integer.optional.form-control.form-control{id: "car_prices_attributes_1406871212209_to_days "}>/
          {name: "car[prices_attributes][1406871212209][to_days] ", step: "1 ", type: "number "}/
      %td.netto
        .form-group.string.optional.car_prices_netto_price
          %input.string.optional.form-control{id: "car_prices_attributes_1406871212209_netto_price "}>/
          {min: "0 ", name: "car[prices_attributes][1406871212209][netto_price] ", type: "text ", value: "0,00 "}/
      %td.brutto
        .form-group.string.optional.car_prices_brutto_price
          %input.string.optional.form-control{id: "car_prices_attributes_1406871212209_brutto_price "}>/
          {min: "0 ", name: "car[prices_attributes][1406871212209][brutto_price] ", type: "text ", value: "0,00 "}/
      %td.remove
        %input{id: "car_prices_attributes_1406871212209__destroy "}>/
        {name: "car[prices_attributes][1406871212209][_destroy] ", type: "hidden ", value: "false "}/
        %a.delete.remove_fields.dynamic
          {href: "# "}
          %span.glyphicon.glyphicon-remove

之后添加这样的咖啡代码:

$ ->
  $(".netto input").change ->
    netto_price = @value
    value = ((netto_price * 0.23) + netto_price)
    brutto = $(this).closest(".nested-fields").find(".brutto input")
    brutto.val value


  $(".brutto input").change ->
    brutto_price = @value
    value = (brutto_price - (brutto_price * 0.23))
    netto = $(this).closest(".nested-fields").find(".netto input")
    netto.val value

工作fiddle