如何使用 javascript 使重復列表中的類似按鈕僅影響該列表中的元素？

Question

我有一個重復數據庫列表的 php 代碼。 每個列表都有相同的元素，只是內容不同。 每個列表都有一個編輯、取消和保存按鈕，以及顯示從數據庫獲取的值的只讀輸入字段。 單擊編輯按鈕將其隱藏，並顯示取消和保存按鈕，並使輸入字段可寫。 單擊取消或保存按鈕將恢復此狀態。 保存按鈕提交表單數據進行處理。

現在，當我單擊任何列表中的編輯按鈕時，它只會影響輸入字段和第一個列表上的按鈕。 我怎樣才能 map 按鈕到同一列表中的輸入字段。 我嘗試了很多方法，但沒有任何效果。

HTML 塊：

<ul class="productList" name="prodUl">

<?php

    $sql = "SELECT img,name,price,qty,code,details,prod_id FROM products WHERE seller_id='".$acctID."'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
      // output data of each row
      while($row = $result->fetch_assoc()) {
?>

            <li name="prodLi">
                    
                <a href="SellerPage.php?code=<?php echo $row["code"]; ?>" onclick="return confirm('This item will be deleted permanently')">Remove Item</a>
                <?php echo '<img src="data:image/jpeg;base64,'.base64_encode($row['img'] ).'" id="productImg">'; ?>
                <form method="post" action="sProdImgProcess.php" enctype="multipart/form-data" name="sProdImg">
                <input type="file" accept="image/*" name="pProfPic" id="pImg"  />
                <input type="hidden" name="prodID2" value="<?php echo $row['prod_id']; ?>">
                <button type="submit" class="pImgUpld" name="pImgUpld" id="upldAcctB2">Upload</button>
                </form>
                <form method="post" action="sellerProdProcess.php" enctype="multipart/form-data" name="sProdForm">
                <input type="hidden" name="prodID" value="<?php echo $row['prod_id']; ?>">
                <div class="productDiv1">
                    <div class="productDiv2">
                        <input type="text" value="<?php echo $row['name'];?>" name="pname" readonly>
                        <br>
                        <input type="number" step=".01" value="<?php echo $row['price']; ?>" name="pprice" class="price" readonly>
                        <br>
                        <input type="number" value="<?php echo $row['qty'];?>" name="pqty" readonly>
                    </div>
                </div>
                <input type="text" value="<?php echo $row['details'];?>" name="pdetails" id="<?php echo $row['prod_id']; ?>" class="details"  size="50" readonly>
                <button type="submit" class="prodSave" name="pSubmit">Save</button>
                <button class="prodCancel" name="pCncl">Cancel</button>
                <button class="prodEdit" name="pEdt">Edit</button>
                </form>
            </li>
            <?php
                }
                }

                $conn->close(); 
            ?>
        </ul>

Javascript 塊：

<script>
(function(W) {
  var D, form, formImg2, prodUl, bts, ipt;

  function init() {
    D = W.document, previous = [];
    form = D.getElementsByName('sProdForm')[0];
    formImg2 = D.getElementsByName('sProdImg')[0];
    prodUl = D.getElementsByName('prodUl');
    bts = prodUl[0].getElementsByTagName('button');
    ipt = prodUl[0].getElementsByTagName('input');
    form.addEventListener('submit', save, false);
    for (var i = 0; i < bts.length; i += 4) {
      bts[i + 2].addEventListener('click', cancel, false);
      bts[i + 3].addEventListener('click', edit, false);
    }
  }

  function save() {
    form.classList.remove('invert');
    formImg2.classList.remove('invert');
    var l = ipt.length;
    while (l--) {
      ipt[l].readOnly = true;
    };
    previous = [];
    //send your info here 
  }

  function edit(e) {
    e.preventDefault();
    form.classList.add('invert');
    formImg2.classList.add('invert');
    var l = ipt.length;
    while (l--) {
      previous[l] = ipt[l].value;
      ipt[l].readOnly = false;
    }
  }

  function cancel(e) {
    form.classList.remove('invert');
    formImg2.classList.remove('invert');
    e.preventDefault();
    var l = ipt.length;
    while (l--) {
      ipt[l].value = previous[l];
      ipt[l].readOnly = true;
    }
  }
  W.addEventListener('load', init, false);
})(window)
</script>

CSS 塊：

button.prodSave {
  display: none;
}

button.prodCancel {
  display: none;
}

button.prodEdit {
  display: inline-block;
}

form.invert>button.prodSave {
  display: inline-block;
}

form.invert>button.prodCancel {
  display: inline-block;
}

form.invert>button.prodEdit {
  display: none;
}

#pImg {
  display: none;
}

#upldAcctB2 {
  display: none;
}

form.invert>#pImg {
  display: inline-block;
}

form.invert>#upldAcctB2 {
  display: inline-block;
}

Answer 1

您可能需要為每個li元素添加一個唯一的 id，然后使用該id到 scope button s 並input s。

Answer 2

您有多個具有相同名稱的 forms 但您的 init function 僅獲得第一種形式：

form = D.getElementsByName('sProdForm')[0];

您可能想要更改它以循環通過每個 forms，例如：

forms = D.getElementsByName('sProdForm');
for (var i = 0; i < forms.length; i++) {
    var form = forms[i]
    //your code here
}