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

我想要的是用户可以从列表中选择一个选项，然后右边的输入应该是可见的，而另外两个应该被隐藏。

See here

Answer 1

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

您希望隐藏元素，即设置HTML attr，这与设置CSS visibility属性不同。

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

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

Answer 2

我删除了下拉列表的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>

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

2 个答案: