javascript - jQuery 更改事件不适用于 Rails 应用程序

Question

jQuery 的更改事件在我的 Rails 应用程序上不起作用。我有一个选择，我希望输入根据我选择的值隐藏或显示。所以我有输入:

<div class="form-group">
    <%= f.label :tipopessoa, "Tipo de Pessoa:", class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
      <%= f.select :tipopessoa, ['Jurídica', 'Física'], class: "form-control" %>
    </div>
  </div>
  <div class="form-group juridica">
    <%= f.label :cnpj, "CNPJ:", class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
    <%= f.text_field :cnpj, class: "form-control" %>
  </div>
  </div>
  <div class="form-group fisica">
    <%= f.label :cpf, "CPF:", class: "col-sm-2 control-label " %>
    <div class="col-sm-6">
      <%= f.text_field :cpf, class: "form-control" %>
    </div>
  </div>
  <div class="form-group juridica">
    <%= f.label :razaosocial, "Razão Social:",class: "col-sm-2 control-label" %>
    <div class="col-sm-6">
    <%= f.text_field :razaosocial, class: "form-control" %>
  </div>
   </div>

并拥有 jQuery 代码:

<script>
jQuery(function(){
  $(document).change(function(){
     if($('#cliente_pessoatipopessoa').val() == 'Jurídica') {
              $(".juridica").show();
              $(".fisica").hide();
          } else {
              $(".fisica").show();
              $(".juridica").hide();
          }
             });
});
</script>

因此，当我将选择更改为 Física 时，具有“Juridica”类的 div 消失，但任何其他更改都不再起作用。
我该如何解决这个问题？

Answer 1

更改甚至应该绑定(bind)到更改的select。

JS Fiddle

$('select').change(function() { // Bind to the select
  if ($(this).val() == 'Jurídica') { // use $(this).val() to get the changed selects value
    $(".juridica").show();
    $(".fisica").hide();
  } else {
    $(".fisica").show();
    $(".juridica").hide();
  }
});

您可以通过执行以下操作来减少代码:

$('select').change(function(){ 
  var isEqual = $(this).val() == 'Jurídica';
  $(".juridica").toggle(isEqual); // Show if equal/ hide if not
  $(".fisica").toggle(!isEqual);  // Hide if equal/ show if not
});

JS Fiddle