使用 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）和一个下拉列表 select 应该使用哪个。

<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';
            }
        }

我想要的是用户可以 select 列表中的一个选项，然后正确的输入应该是可见的，而其他 2 个应该是隐藏的。

See here

Answer 1

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

您想隐藏设置HTML 属性的元素，这与设置CSS visibility 不同属性.

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

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

Answer 2

我删除了下拉列表的 onchange 属性。事件处理程序将通过 .addEventListener() 添加。

这也使用了一些 ES6 "magic" (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> 元素？
然后你必须将 ids 更改为类因为 ids 必须是唯一的。

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>

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

Hide dynamically created element (php and html) with Javascript

html

javascript

dynamic

show

hide