Блог

Главная - Вопросы по программированию - Показывать или скрывать поля на основе цикла javascript

Показывать или скрывать поля на основе цикла javascript

#javascript #php #html #loops #dropdown

#javascript #php #HTML #циклы #выпадающий список

Вопрос:

Могу ли я создать код javascript для цикла для #tip_piesa1, #tip_piesa2, #tip_piesa3, то же самое для .cod_piesa1, 2, 3 и .fisa_piesa1, 2, 3, как показано ниже, пример witch не работает …??

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

Комментарии:

1. Пожалуйста, добавьте HTML-код, то, что вы пытались сделать, фактический результат, который вы получили, и ожидаемый результат 🙂

2. enabled это пользовательский атрибут, его установка ничего не делает в DOM. Используйте CSS для отображения и скрытия элементов.

3. Я не уверен, почему вы смешиваете document.getElementById() с jQuery, но $('.cod_piesa' i) и document.getElementById('cod_piesa' i) определенно не будет возвращать одни и те же элементы: первый использует селектор класса CSS, а второй (как следует из названия) выбирает by id . Если это не (по крайней мере, часть) вашей ошибки, это, вероятно, настройка для будущей головной боли при обслуживании.

Ответ №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");
    }
  });
}

Комментарии:

1. Вау, это работает. @Hendry Raudsepp большое вам спасибо!

Метки: