使用JavaScript隱藏動態創建的元素（php和html）

Question

我有一個div，可使用PHP從數據庫中檢索數據並將信息附加到html元素。

<?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個應該隱藏。

看這里

Answer 1

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

您要隱藏設置HTML屬性的元素，這與設置CSS visibility屬性不同。

編輯 ：感謝@Andreas指出錯誤的選擇器。

EDIT2 ：更改動態hidden輸入的代碼。

Answer 2

我刪除了下拉菜單的onchange屬性。 事件處理程序將通過.addEventListener()添加。

這也使用了ES6的“魔術”（ let ， 箭頭功能（ => ， 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>