Rails 交互式表单中的 jQuery 语法

Question

所以我正在为一个 rails 项目构建一个交互式表单，但我不确定如何在同一个文件中列出多个 jQuery 函数。 每次我尝试添加第二组代码语言时，它都会破坏整个文件。

这是导轨代码。

<div id="countertype" class="form-group" align="left">
  <%= f.label :countertype_id, "What type of countertop material do you need?" %></br>
  <%= f.collection_select :countertype_id, Countertype.all, :id, :name, { :prompt => "Select Your Material" }, class: "input-sm"  %>
</div>

如果用户从上面称为“granite”的字段中选择选项 id 1，则显示 granitecolor 选择字段。 同样适用于大理石、皂石等。

这是我想显示的字段选择：

<div id="granitecolor" align="left" class="form-group">
  <%= f.label :granitecolor_id, "What granite color pattern do you want?" %></br>
  <%= f.select :granitecolor_id, options_for_select(@granitecolors.map{ |g| [g.name, g.id, {'data-img-src'=>g.url}]}) %>
</div>

或者

<div id="marblecolor" align="left" class="form-group">
  <%= f.label :marblecolor_id, "What marble color pattern do you want?" %></br>
  <%= f.select :marblecolor_id, options_for_select(@marblecolors.map{ |m| [m.name, m.id, {'data-img-src'=>m.url}] }) %>
</div>

这是我现在在我的 jQuery 文件中的内容，它工作正常。

$(document).ready(function(){ 
    $("select:not(#countertop_countertype_id)").val('0').imagepicker({
      show_label:   true,
      clicked:function(){

        console.log($(this).find("option[value='" + $(this).val() + "']").data('img-src'));

      }
    });

}); 

这是我想添加的（或它的一个变体）。

$(document).ready(function () {
  toggleFields();
  $("#countertype").change(function () {
    toggleFields();
  });

});

function toggleFields() {
  if ($("#countertype").val() = 1 )
     $("#granitecolor").show();
  elseif
     ($("#countertype").val() = 2 )
     $("#marblecolor").show();
}

任何帮助将不胜感激！ 谢谢！

Answer 1

比我想象的要容易得多。 我刚刚在第一个之后发布了整个 jQuery 代码。

$(document).ready(function(){ 
  $("select:not(#countertop_countertype_id)").val('0').imagepicker({
     show_label:   true,
     clicked:function(){

    console.log($(this).find("option[value='" + $(this).val() + "']").data('img-src'));

    }
  });

});   

$(document).ready(function() {

    $('#granitecolor').hide();
    $('#marblecolor').hide();

    $('#countertype').change(function () {
        if ($('#countertype option:selected').text() == "Granite"){
            $('#granitecolor').show();
            $('#marblecolor').hide();

        }
        else if ($('#countertype option:selected').text() == "Marble"){
            $('#granitecolor').hide();
            $('#marblecolor').show();

        }
        else if ($('#countertype option:selected').text() == "Soapstone"){
            $('#granitecolor').hide();
            $('#marblecolor').hide();

        }
    }); 
});