javascript - 基于javascript循环显示或隐藏字段

Question

我可以创建 javascript 代码来循环 #tip_piesa1、#tip_piesa2、
#tip_piesa3，同样适用于 .cod_piesa1, 2, 3 和 .fisa_piesa1, 2, 3 如下例女巫不工作...??

$(document).ready(function() {
      for (var i = 1; i <= 10; i++) {
        $('#tip_piesa' + i).on('change', function() {
          var selectedValue = $('#tip_piesa' + i).val();
          if (selectedValue == "PIESA UZATA" || selectedValue == "PIESA NOUA-DEFECTA" || selectedValue == "PIESA NOUA-NEFOLOSITA") {
            $('.cod_piesa' + i).slideDown(500);
            document.getElementById('cod_piesa' + i).setAttribute("enabled", "enabled");
            $('.fisa_piesa' + i).slideDown(500);
            document.getElementById('fisa_piesa' + i).setAttribute("enabled", "enabled");
          } else if (selectedValue == "NEGATIE") {
            $('.fisa_piesa' + i).slideDown(500);
            document.getElementById('fisa_piesa' + i).removeAttribute("enabled");
            $('.cod_piesa' + i).slideUp(500);
            document.getElementById('cod_piesa' + i).removeAttribute("enabled");
          } else {
            $('.cod_piesa' + i).slideUp(500);
            document.getElementById('cod_piesa' + i).removeAttribute("enabled");
            $('.fisa_piesa' + i).slideUp(500);
            document.getElementById('fisa_piesa' + i).removeAttribute("enabled");
          }
        });
      });

HTML/PHP 代码的一部分。该组与 grup3、grup 4 等重复

<?php
for ($s = 1; $s <= 10; $s++) {
    echo ' <div id="grup'.$s.'">
              <div class="jumbotron">
                <div class="form-group">
                    <label class="control-label" for="tip_piesa'.$s.'">Selecteaza tip piesa '.$s.'*</label>
                      <select type="text" class="form-control" id="tip_piesa'.$s.'" name="tip_piesa'.$s.'">
                        <option value="">Selecteaza tip piesa</option>
                        <option value="PIESA UZATA">PIESA UZATA</option>
                        <option value="PIESA NOUA-DEFECTA">PIESA NOUA-DEFECTA</option>
                        <option value="PIESA NOUA-NEFOLOSITA">PIESA NOUA-NEFOLOSITA</option>
                        <option value="NEGATIE">NEGATIE</option>
                      </select>
                    </div>
                    <div class="row">
                      <div class="form-group col cod_piesa'.$s.'">
                        <label class="control-label" for="cod_piesa'.$s.'">Cod Piesa*</label>
                        <input type="text" class="form-control" id="cod_piesa'.$s.'" name="cod_piesa'.$s.'" placeholder="Cod Piesa" >
                      </div>
                      <div class="form-group col fisa_piesa'.$s.'">
                        <label class="control-label" for="fisa_piesa'.$s.'">Fisa Piesa*</label>
                        <input type="text" class="form-control" id="fisa_piesa'.$s.'" name="fisa_piesa'.$s.'" value="ESD" >';

if($s != 10) echo '     <span><div id="plus'.$s.'" class="icon-add2" data-toggle="tooltip" data-placement="top" title="Adauga fisa" onclick="grup'.($s+1).'()"><img src="img/add3.png"></div></span>
                        <span><div id="minus'.$s.'" class="icon-add3" data-toggle="tooltip" data-placement="top" title="Sterge fisa" onclick="minusgrup'.$s.'()"><img src="img/minus.png"></div></span>';
else echo '             <span><div id="minus10" class="icon-add3" data-toggle="tooltip" data-placement="top" title="Sterge fisa" onclick="minusgrup10()"><img src="img/minus.png"></div></span>';

echo '
                      </div>
                    </div>
                  </div>
                </div> ';
} ?>

如果我编写如下所示的 javascript 代码，它就可以工作，但我有 10 个组，我需要在一个循环中压缩此代码。

$("#tip_piesa1").on('change',function(){
  var selectedValue = $("#tip_piesa1").val();
  if (selectedValue == "PIESA UZATA" || selectedValue == "PIESA NOUA-DEFECTA" || selectedValue == "PIESA NOUA-NEFOLOSITA")
  {
    $(".cod_piesa1").slideDown(500);
    document.getElementById("cod_piesa1").setAttribute("enabled","enabled");
  $(".fisa_piesa1").slideDown(500);
    document.getElementById("fisa_piesa1").setAttribute("enabled","enabled");
    }
  else if (selectedValue == "NEGATIE") {
  $(".fisa_piesa1").slideDown(500);
    document.getElementById("fisa_piesa1").removeAttribute("enabled");
  $(".cod_piesa1").slideUp(500);
  document.getElementById("cod_piesa1").removeAttribute("enabled");
  }
  else {
  $(".cod_piesa1").slideUp(500);
    document.getElementById("cod_piesa1").removeAttribute("enabled");
  $(".fisa_piesa1").slideUp(500);
    document.getElementById("fisa_piesa1").removeAttribute("enabled");
  }
});

$("#tip_piesa2").on('change',function(){
  var selectedValue = $("#tip_piesa2").val();
  if (selectedValue == "PIESA UZATA" || selectedValue == "PIESA NOUA-DEFECTA" || selectedValue == "PIESA NOUA-NEFOLOSITA")
  {
    $(".cod_piesa2").slideDown(500);
    document.getElementById("cod_piesa2").setAttribute("enabled","enabled");
  $(".fisa_piesa2").slideDown(500);
    document.getElementById("fisa_piesa2").setAttribute("enabled","enabled");
    }
  else if (selectedValue == "NEGATIE") {
  $(".fisa_piesa2").slideDown(500);
    document.getElementById("fisa_piesa2").removeAttribute("enabled");
  $(".cod_piesa2").slideUp(500);
  document.getElementById("cod_piesa2").removeAttribute("enabled");
  }
  else {
  $(".cod_piesa2").slideUp(500);
    document.getElementById("cod_piesa2").removeAttribute("enabled");
  $(".fisa_piesa2").slideUp(500);
    document.getElementById("fisa_piesa2").removeAttribute("enabled");
  }
});

Answer 1

for (i = 1; i <= 10; i++) {
  $("#tip_piesa"+i).on('change',function(){
    var selectedValue = $(this).val();
    var code_piesa_div = this.parentElement.parentElement.children[1].children[0];
    var code_piesa_input = code_piesa_div.children[1];
    var fisa_piesa_div = this.parentElement.parentElement.children[1].children[1];
    var fisa_piesa_input = fisa_piesa_div.children[1];
    if (selectedValue == "PIESA UZATA" || selectedValue == "PIESA NOUA-DEFECTA" || selectedValue == "PIESA NOUA-NEFOLOSITA")
    {
      $(code_piesa_div).slideDown(500);
      code_piesa_input.setAttribute("enabled","enabled");
    $(fisa_piesa_div).slideDown(500);
      fisa_piesa_input.setAttribute("enabled","enabled");
      }
    else if (selectedValue == "NEGATIE") {
    $(fisa_piesa_div).slideDown(500);
      fisa_piesa_input.removeAttribute("enabled");
    $(code_piesa_div).slideUp(500);
    code_piesa_input.removeAttribute("enabled");
    }
    else {
    $(code_piesa_div).slideUp(500);
      code_piesa_input.removeAttribute("enabled");
    $(fisa_piesa_div).slideUp(500);
      fisa_piesa_input.removeAttribute("enabled");
    }
  });
}