提交后如何在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>