html 仅当div在js中有值时才显示div

jckbn6z7  于 2023-03-11  发布在  其他
关注(0)|答案(1)|浏览(201)

我用下面的代码来显示值 形式为:

var data = [
   {Queda:  "Sim", Outro: "Teste1", },
];

for (var i = 0; i < data.length; i++) {
  var Queda = data[0].Queda;
  var Outro = data[0].Outro;
  
  if(Queda == 'Sim'){
    $('#quedpresa').prop('checked' , true);

  }else if(Queda == 'Não'){
    $('#quedpresa1').prop('checked' , true);
  }
  $('#quedpressa1').val(Outro);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="dropdown-item btn btn-warning upd_qued"><i class="metismenu-icon pe-7s-note"></i> Alterar</a>

<form method="POST" class="row g-3 insquedaa2">

  <div class="col-xs-6 col-sm-3">
    <label class="form-label">Queda Presenciada? </label>
    <input type="radio" class="inradio" name="quedpresa" id="quedpresa" value="Sim">
    <label for="quedpresa" class="labradio">Sim</label>
    <input type="radio" class="inradio" name="quedpresa" id="quedpresa1" value="Não">
    <label for="quedpresa1" class="labradio" style="margin-left: 2%;">Não</label>
  </div>

  <div class="col-xs-6 col-sm-3" id="quedpresss" style="display: none;">
    <label for="quedpressa1" class="form-label">Outro   </label>
    <input type="text" class="form-control" id="quedpressa1" name="quedpressa1">
  </div>
 </form>

我打算如果单选按钮的div是YES,它会显示在开始处没有显示的div。如果不是,则隐藏该div。

8fsztsew

8fsztsew1#

然后使用jQuery在您希望显示的位置显示它(另外,添加了click listener以切换它们):

var data = [
   {Queda:  "Sim", Outro: "Teste1", },
];

for (var i = 0; i < data.length; i++) {
  var Queda = data[0].Queda;
  var Outro = data[0].Outro;
  
  if(Queda == 'Sim'){
    $('#quedpresa').prop('checked' , true);
    
    $('#quedpresss').show();

  }else if(Queda == 'Não'){
    $('#quedpresa1').prop('checked' , true);
  }
  
  $('#quedpresa').click(()=>$('#quedpresss').show());
  $('#quedpresa1').click(()=>$('#quedpresss').hide());
  
  $('#quedpressa1').val(Outro);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="dropdown-item btn btn-warning upd_qued"><i class="metismenu-icon pe-7s-note"></i> Alterar</a>

<form method="POST" class="row g-3 insquedaa2">

  <div class="col-xs-6 col-sm-3">
    <label class="form-label">Queda Presenciada? </label>
    <input type="radio" class="inradio" name="quedpresa" id="quedpresa" value="Sim">
    <label for="quedpresa" class="labradio">Sim</label>
    <input type="radio" class="inradio" name="quedpresa" id="quedpresa1" value="Não">
    <label for="quedpresa1" class="labradio" style="margin-left: 2%;">Não</label>
  </div>

  <div class="col-xs-6 col-sm-3" id="quedpresss" style="display: none;">
    <label for="quedpressa1" class="form-label">Outro   </label>
    <input type="text" class="form-control" id="quedpressa1" name="quedpressa1">
  </div>
 </form>

相关问题