用Javascript隐藏动态创建的元素（php和html）

Question

我有一个从PHP数据库中检索数据并将信息附加到html元素的div。

<?php 
$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC"); 
if (!empty($product_array)) { 
    foreach($product_array as $key=>$value){ 
?> 
    <div class="product-item"> 
     <form method="post" action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>"> 
      <div class="product-image"><img src="<?php echo $product_array[$key]["image"]; ?>"></div> 
      <div><strong><?php echo $product_array[$key]["name"]; ?></strong></div> 
      <div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div> 

我有3个不同的输入数字（grs，kgs，pzas）和下拉列表来选择应该使用哪一个。

<div class="cantidad"> 
       <input class="medida" id="grs" type="number" name="gramos" step="50" value="50" size="1" min="50" max="950" onkeydown="return false" /> 
       <input class="medida" id="kgs" type="number" name="kilogramos" step=".5" value=".5" size="2" min=".5" max="99" onkeydown="return false" /> 
       <input class="medida" id="pzas" type="number" name="unidades" step="1" value="1" size="2" min="1" max="99"onkeydown="return false" /> 
       <select id="cd-dropdown" class="cd-select" onchange="medidas()"> 
        <option value="grs">grs</option> 
        <option value="kgs">kgs</option> 
        <option value="pzas">pzas</option> 
       </select> 
      </div> 

我试图用javascript隐藏其他2个输入数字，但没有按预期工作。

$(function() { 
       $('#cd-dropdown').dropdown(); 
      }); 

     function medidas() 
     { 
      var tipo = document.getElementById('cd-dropdown').value; 
      if(tipo=='grs') 
      { 
       document.getElementById('grs').style.visibility = 'visible'; 
       document.getElementById('kgs').style.visibility = 'hidden'; 
       document.getElementById('pzas').style.visibility = 'hidden'; 
      } 
      else if(tipo=='kgs') 
      { 
       document.getElementById('grs').style.visibility = 'hidden'; 
       document.getElementById('kgs').style.visibility = 'visible'; 
       document.getElementById('pzas').style.visibility = 'hidden'; 
      } 
      else if(tipo=='pzas') 
      { 
       document.getElementById('grs').style.visibility = 'hidden'; 
       document.getElementById('kgs').style.visibility = 'hidden'; 
       document.getElementById('pzas').style.visibility = 'visible'; 
      } 
     } 

我要的是用户可以从列表中选择一个选项，然后右输入应该是可见的，而其他2应该被隐藏。

See here

Answer 1

我已经删除了onchange属性的下拉菜单。事件处理程序将通过.addEventListener()来代替。

这也使用了一些ES6 “神奇”（let，arrow functions (=>)，Array.from()）

let select = document.querySelector("#cd-dropdown"), 
 
    inputs = Array.from(document.querySelectorAll(".cantidad>input.medida")); 
 

 
select.addEventListener("change", medidas, false); 
 
medidas.call({ "value": select.value }); // "fake" a change event 
 

 
function medidas(e) { 
 
    inputs.forEach(i => { 
 
    i.style.visibility = (i.id === this.value ? "visible" : "hidden"); 
 
    }); 
 
}

<div class="cantidad"> 
 
    <input class="medida" id="grs" type="number" name="gramos" step="50" value="50" size="1" min="50" max="950" onkeydown="return false" /> 
 
    <input class="medida" id="kgs" type="number" name="kilogramos" step=".5" value=".5" size="2" min=".5" max="99" onkeydown="return false" /> 
 
    <input class="medida" id="pzas" type="number" name="unidades" step="1" value="1" size="2" min="1" max="99" onkeydown="return false" /> 
 
    <select id="cd-dropdown" class="cd-select"> 
 
     <option value="grs">grs</option> 
 
     <option value="kgs">kgs</option> 
 
     <option value="pzas">pzas</option> 
 
    </select> 
 
</div>

更新

“，但它改变了所有的一切投入产品“

那么有多个<div class="cantidad">...</div>元素？
然后，您必须将ID更改为类，因为ID必须是唯一的。

let selects = Array.from(document.querySelectorAll(".cd-select")); 
 

 
selects.forEach(select => { 
 
    select.addEventListener("change", medidas, false); 
 
    medidas.call(select); // "fake" a change event 
 
}); 
 

 
function medidas() { 
 
    let inputs = Array.from(this.parentNode.querySelectorAll("input.medida")) 
 

 
    inputs.forEach(i => { 
 
    i.style.visibility = (i.classList.contains(this.value) ? "visible" : "hidden"); 
 
    }); 
 
}

<div class="cantidad"> 
 
    <input class="medida grs" type="number" name="gramos" step="50" value="50" size="1" min="50" max="950" onkeydown="return false" /> 
 
    <input class="medida kgs" type="number" name="kilogramos" step=".5" value=".5" size="2" min=".5" max="99" onkeydown="return false" /> 
 
    <input class="medida pzas" type="number" name="unidades" step="1" value="1" size="2" min="1" max="99" onkeydown="return false" /> 
 
    <select class="cd-select"> 
 
    <option value="grs">grs</option> 
 
    <option value="kgs">kgs</option> 
 
    <option value="pzas">pzas</option> 
 
    </select> 
 
</div> 
 
<div class="cantidad"> 
 
    <input class="medida grs" type="number" name="gramos" step="50" value="20" size="1" min="50" max="950" onkeydown="return false" /> 
 
    <input class="medida kgs" type="number" name="kilogramos" step=".5" value=".2" size="2" min=".5" max="99" onkeydown="return false" /> 
 
    <input class="medida pzas" type="number" name="unidades" step="1" value="2" size="2" min="1" max="99" onkeydown="return false" /> 
 
    <select class="cd-select"> 
 
    <option value="grs">grs</option> 
 
    <option value="kgs">kgs</option> 
 
    <option value="pzas">pzas</option> 
 
    </select> 
 
</div>

Answer 2

$.each($(".medida"), function() { 
    $(this).prop("hidden", $(this).prop("id") != tipo); 
}) 

你想隐藏的元素，它是设置一个HTML ATTR，这是建立CSS visibility属性的不同。

编辑：感谢@Andreas指出错误的选择器。

EDIT2：更改动态hidden输入的代码。