Question

有明星的简单形式有2个图标：star＆amp; star_border（星号用于标记的一个，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>

如何在提交后用javascript中的星星清理表单？

1 个答案: