在 HAML 中切换 div 的单选按钮

Question

我想做一些非常简单的事情：如果选择了一个单选按钮，则显示一个 div，隐藏另一个 div，如果选择另一个单选按钮，则显示 div被选中，从而隐藏第一个 div.

这是我的，但不起作用：

row
        .col-sm-6.form-group
          = form.radio_button "meta_data[quantity_meta][type]", value: "range", onclick: "toggleDiv('.toggle-range', '.toggle-fixed');"
          = form.label "meta_data[quantity_meta][type]", "range"
      .row
        .col-sm-6.form-group.fixed
          = form.radio_button "meta_data[quantity_meta][type]", value: "fixed", onclick: "toggleDiv('.toggle-fixed', '.toggle-range');"
          = form.label "meta_data[quantity_meta][type]", "fixed"

      .div.toggle-range
        = form.label "YO!", hidden: true

      .div.toggle-fixed
        = form.label "Can't stop the feeling!", hidden: true

以及 JavaScript（可通过资产管道访问）：

function toggleDiv(hideDiv, showDiv) {
  $(hideDiv).hide();
  $(showDiv).show();
}

很简单。然而，当我呈现页面并检查我的“单选按钮”时，这就是我所看到的：

<input type="radio" value="{:value=>"range", :onclick=>"toggleDiv('.toggle-range', '.toggle-fixed')"}" name="meta_data[quantity_meta][type]">

它将我的 onclick 属性放入单选按钮的 value 属性中。

我怎样才能在这里实现我的目标？

Answer 1

这与 Haml 或您的 javascript 无关。 radio_button的签名是：

radio_button(method, tag_value, options = {})

由于您将散列作为第二个参数传递，因此它被强制转换为字符串。相反，您需要：

= form.radio_button "meta_data[quantity_meta][type]", "range", onclick: "toggleDiv('.toggle-range', '.toggle-fixed');"

在 HAML 中切换 div 的单选按钮

Radio buttons to toggle div in HAML

javascript

haml

ruby-on-rails