用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輸入的代碼。