javascript - JS动态显示/隐藏多种表单的div

Question

我在 Rails 中生成了一个表单，允许用户使用“添加对象”按钮添加任意数量的对象实例。对象的每个实例都显示相同的形式。我希望当他们在选择输入中选择特定选项时，该表单能够动态显示一个字段。

我当前的 JS 遇到的问题是，当我更改一个表单上的选择输入时，页面上的其余表单都会反射(reflect)更改。我需要 JS 仅反射(reflect)正在修改的表单上的更改。

# HTML
<form id=edit_application>
    <div class="fields">
        <select class="asset_type">
            <option value="Machinery">Machinery</option>
            <option value="Equipment">Equipment</option>
            <option value="Property">Property</option>
        </select>
        <div class="Machinery">
            # input field
        </div>
        <div class="Equipment">
            # input field
        </div>
        <div class="Property">
            #input field
        </div>
    </div>
    <div class="fields">
        <select class="asset_type">
            <option value="Machinery">Machinery</option>
            <option value="Equipment">Equipment</option>
            <option value="Property">Property</option>
        </select>
        <div class="Machinery">
            # input field
        </div>
        <div class="Equipment">
            # input field
        </div>
        <div class="Property">
            #input field
        </div>
    </div>
</form>

对象表单的每个实例都包含在

中

<div class="fields"></div>.

我用来在 Rails 中生成嵌套对象表单的 gem 提供了一个触发器，我可以使用该触发器 (nested:fieldAdded) 在添加新实例时运行 JS 函数。

    $(function() {
      $(document).on('nested:fieldAdded', function(event){
        $(".property").hide();
        $(".equipment").hide();
        $(".machinery").hide();
      });
    });

    $(function() {
      $('.asset_type').on('change', function () {
          $( "select option:selected").each(function(){
              if($(this).attr("value")=="Property"){
                  $(".property").show();
                  $(".equipment").hide();
                  $(".machinery").hide();
              }
              if($(this).attr("value")=="Machinery"){
                  $(".machinery").show();
                  $(".property").hide();
                  $(".equipment").hide();
              }
              if($(this).attr("value")=="Equipment"){
                  $(".property").hide();
                  $(".equipment").show();
                  $(".machinery").hide();
              }
          });
      }).change();
    });

上述函数背后的逻辑是，当添加对象的新实例时，应隐藏字段。当用户更改选择输入时，结果应显示正确的 div，并确保其他 div 被隐藏，但是当选择输入更改为“属性”时，它不应更改每个显示的所有字段页面上的表单。

Answer 1

我对 html 做了一些轻微的更改，以便您可以知道您正在查看哪个输入字段。在 asset_type 选项的更改函数内，我得到最接近的字段 div。我使用该引用来过滤您想要显示的 div

HTML

<form id=edit_application>
    <div class="fields">
        <select class="asset_type">
            <option value="Machinery">Machinery</option>
            <option value="Equipment">Equipment</option>
            <option value="Property">Property</option>
        </select>
        <div class="Machinery">
            # machinery input field
        </div>
        <div class="Equipment">
            # equipment input field
        </div>
        <div class="Property">
            # property input field
        </div>
    </div>
    <div class="fields">
        <select class="asset_type">
            <option value="Machinery">Machinery</option>
            <option value="Equipment">Equipment</option>
            <option value="Property">Property</option>
        </select>
        <div class="Machinery">
            # machinery input field
        </div>
        <div class="Equipment">
            # equipment input field
        </div>
        <div class="Property">
            # property input field
        </div>
    </div>
</form>

JQuery

$(function() {
    $(document).on('nested:fieldAdded', function(event){
        $(".property").hide();
        $(".equipment").hide();
        $(".machinery").hide();
    });
});

$(function() {
    $('.asset_type').on('change', function () {
        var foo = $(this).closest(".fields");
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="Property"){
                $(foo).children(".Property").show();
                $(foo).children(".Equipment").hide();
                $(foo).children(".Machinery").hide();
            }
            if($(this).attr("value")=="Machinery"){
                $(foo).children(".Property").hide();
                $(foo).children(".Equipment").hide();
                $(foo).children(".Machinery").show();
            }
            if($(this).attr("value")=="Equipment"){
                $(foo).children(".Property").hide();
                $(foo).children(".Equipment").show();
                $(foo).children(".Machinery").hide();
            }
        });
    }).change();
});