提交后如何在JavaScript中清除帶有星號的表格？

Question

有一個帶有星標的簡單形式，其中有2個圖標：star＆star_border（星號用於標記一個，星號_用於空白）。

表單本身非常簡單：

<div class="star-input">
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
    <i class="material-icons">star_border</i>
</div>

當表格被加載時，當訪客沒有按下時，星星在標記和空白之間不斷變化。 當他按下某顆星星時，狀態將被凍結，有些星星將被填充，而另一些星星將被清空（取決於標記）。 這樣就形成了排名。 對我來說很清楚。

但是，我嘗試提出一種解決方案，以在提交表單后將其清除為初始狀態。 如果您在提交后立即打開它，但沒有重新加載頁面，則仍會存儲過去的值。

這是JavaScript的功能代碼：

prepareThemes.prototype.initReviewDialog = function() {
  const dialog = document.querySelector("#dialog-add-review");
  this.dialogs.add_review = new mdc.dialog.MDCDialog(dialog);

  this.dialogs.add_review.listen("MDCDialog:accept", () => {
    let pathname = this.getCleanPath(document.location.pathname);
    let id = pathname.split("/")[2];

    if (
      !dialog.querySelector("#text").value ||
      !dialog.querySelector("#textwhoareyou").value
    ) {
      alert("No text");
      return;
    } else {
      this.addRating(id, {
        rating,
        text: dialog.querySelector("#text").value,
        userName: dialog.querySelector("#textwhoareyou").value,
        timestamp: new Date(),
        userId: firebase.auth().currentUser.uid
      }).then(() => {
        this.rerender();
      });
      dialog.querySelector("#text").value = "";
      dialog.querySelector("#textwhoareyou").value = "";
    }
  });

  let rating = 0;

  dialog.querySelectorAll(".star-input i").forEach(el => {
    const rate = () => {
      let after = false;
      rating = 0;

      [].slice.call(el.parentNode.children).forEach(child => {
        if (!after) {
          rating++;
          child.innerText = "star";
        } else {
          child.innerText = "star_border";
        }
        after = after || child.isSameNode(el);
      });
    };
    el.addEventListener("mouseover", rate);
  });
};

感謝您的任何建議。 大家好。

Answer 1

簡便的解決方案是在提交表單后重新構建div，因此您可以執行以下操作：

  function doRate() { document.querySelectorAll('.star-input i').forEach(el => { const rate = () => { let after = false; rating = 0; [].slice.call(el.parentNode.children).forEach(child => { if (!after) { rating++; child.innerText = 'star'; } else { child.innerText = 'star_border'; } after = after || child.isSameNode(el); }); }; el.addEventListener('mouseover', rate); }); }; doRate(); document.querySelector('#my-form') .addEventListener('submit', function(e) { e.preventDefault(); // Do you logic here // And after that rebuild your div var myDiv = document.querySelector('.star-input'); myDiv.innerHTML = ` <i class="material-icons">star_border</i> <i class="material-icons">star_border</i> <i class="material-icons">star_border</i> <i class="material-icons">star_border</i> <i class="material-icons">star_border</i>`; doRate(); }) 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <form id="my-form"> <div class="star-input"> <i class="material-icons">star_border</i> <i class="material-icons">star_border</i> <i class="material-icons">star_border</i> <i class="material-icons">star_border</i> <i class="material-icons">star_border</i> </div> <button id="my-button">Rate!</button> </form>