Javascript JS动态显示/隐藏多个表单的div

我在rails中生成了一个表单，允许用户通过“添加对象”按钮添加任意数量的对象实例。对象的每个实例都显示相同的表单。我希望表单在选择输入中选择特定选项时动态显示字段

我当前的JS存在的问题是，当我在一个表单上更改select输入时，页面上的其他表单都会反映出更改。我需要JS只反映正在修改的表单上的更改

# 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>

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

当调用

$（.className）.show（）时

它将显示或隐藏具有该类名的所有元素。也许你应该为你想要隐藏的元素生成一些ID。类似于

，这样您的JS就可以

if($(this).attr("value")=="Machinery"){
      $("#Machine1").show();
      $("#prop1").hide();
      $("#equip1").hide();
}

---

我对html做了一点修改，这样你就可以知道你在看哪个输入字段了。在asset_type选项的change函数中，我得到了最接近的fields div。我使用该引用来筛选要显示的div

HTML

---

如下面所示更改代码。更改具有类“字段”的选择框的get div时。现在您有了元素的对象，它是“字段”中所有“属性”、“设备”和“机械”的父对象。在这里，通过jquery函数，您可以在特定的父元素中找到子元素

您还可以选择将事件附加到动态创建的元素。允许我们将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子体触发，无论这些子体现在存在还是将来添加

检查

---

我不确定我是否理解你的问题，但我会这样做：

假设您的场景需要基于用户交互动态创建N个对象，然后操纵这些对象/它们的属性。如果创建新表单实例的代码创建的html对象具有完全相同的ID或类，或者您可能愿意使用任何css选择器来处理特定元素或对象，那么，实际上，引用给定的html元素ID或类将最终选择所有表单中的所有现有元素，因为他们的css选择器完全相同。因此，最简单的解决方案是在每次生成表单的新实例时增加一个计数器

在表单中命名换行div“fields”时必须使用此计数器

假设用户刚刚单击了触发新表单创建的任何输入选项-假设这是用户第三次这样做，您将得到以下结果：

<div class="fields1">
<div class="fields2">
<div class="fields3">

---

对象的实例由gem动态生成，并附加了几个数字（例如id=“machine3123432X”）。我无法计划提前知道ID是什么。这是正确的答案，尽管我会在最近的：

var foo=$（this.closest（.fields））中使用
.fields
-选择器谢谢你的建议。我编辑了我的回复以反映我仍在努力解决这个问题。为了进一步调试，我在每个if块中添加了一个console.log，以确保它选择了正确的值-它是正确的。但是，show（）和hide（）不起作用。我将把我的代码放在一个小提琴上，并与大家分享，以便进一步调试。感谢您迄今为止的帮助。如果可能，请提供小提琴。我将检查为什么隐藏显示不起作用。@Questifer alos我已更新我的答案并在中添加一个新选项code@Questifer可能是我发现的问题。在html中，您给出以大写“Machinery”、“Equipment”、“property”开头的类名，在show hide代码中使用小写字母。支票也同样适用name@Questifer检查我更新的代码类是否以大写开头。它会起作用的
if($(this).attr("value")=="Machinery"){
      $("#Machine1").show();
      $("#prop1").hide();
      $("#equip1").hide();
}

<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>

$(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();
});

 $(function() {
  $(document).on('change','.asset_type',function () {
     var OBJ = $(this).parent('div.fields')
      if($(this).val()=="Property"){
          OBJ.find(".Property").show();
          OBJ.find(".Equipment").hide();
          OBJ.find(".Machinery").hide();
      }
      if($(this).val()=="Machinery"){
          OBJ.find(".Machinery").show();
          OBJ.find(".Property").hide();
          OBJ.find(".Equipment").hide();
      }
      if($(this).val()=="Equipment"){
          OBJ.find(".Property").hide();
          OBJ.find(".Equipment").show();
          OBJ.find(".Machinery").hide();
      }
  }).change();
});

<div class="fields1">
<div class="fields2">
<div class="fields3">

$(".fields" + counterValue + " .Machinery").val()