JavaScript自定義星級評分系統

我想創建一個有 5 顆星的星級評分系統。您不能選擇半星，只能選擇一星。我想實作以下目標：如果用戶單擊星號，則在它之前應該激活一個和另一個星號，如果用戶單擊較低的星號，則在選定的星號之后停用所有星號。

這是我到目前為止得到的：用戶可以在五顆星中選擇四顆星（在第五次點擊時，我有一個應該解決的錯誤）。

PS：我正在使用 SVG 影像，但插入太難看，所以[ ]空星（默認）和[X]選定（活動）星。

這是我的代碼：

for (let i = 1; i <= 5; i  ) { document.getElementById("w__stars").innerHTML  = `<span >[ ]</span>`; }
var icon = document.getElementsByClassName("r__icon");
for (let i = 0; i < icon.length; i  ) {
  icon[i].addEventListener("click", function (e) { console.log("--");
    for (let j = 0; j < i 1; j  ) {
    console.log("i: "  i); console.log("j: " (j 1)); console.log("Rest: "  (j (5-(i 1))));
      icon[j].innerHTML = `[X]`;
      icon[i (5-(i 1))].innerHTML = `[ ]`;
    }
  });
}

<div class="flex flex-row product-star-con" id="w__stars"></div>

uj5u.com熱心網友回復：

您的方法只需要一種不同的方法。例如，如果您要將其放置在其中，則不需要該內回圈icon[j].innerHTML = '[X]'.. 可以將其放置在外回圈內。

此外，不必要的計算使任務看起來比實際更難。由于這是一個回圈，因此i變數在回圈中將始終具有最高值，因為那里沒有break陳述句

下面的方法針對與當前單擊的元素相關的下一個元素和上一個元素，并將適當的“ innerHTML ”應用于它們

// Function to get previous and next siblings of the target element
function getSiblings(element,  type){
    var arraySib = [];
    if ( type == 'prev' ){
        while ( element = element.previousSibling ){
            arraySib.push(element);
        }
    } else if ( type == 'next' ) {
        while ( element = element.nextSibling ){
            arraySib.push(element);
        }
    }
    return arraySib;
}
for (var i = 1; i <= 5; i  ) { document.getElementById("w__stars").innerHTML  = `<span >[ ]</span>`; }
var icon = document.getElementsByClassName("r__icon");
for (var i = 0; i < icon.length; i  ) {
  icon[i].addEventListener("click", function (e){
    this.innerHTML = `[X]`;
    var prev = getSiblings(this, 'prev')
    var next = getSiblings(this, 'next')
    // populate previous siblings
    for(p = 0; p < prev.length; p  ){
       prev[p].innerHTML = `[X]`
    }
    // clear next siblings
    for(n = 0; n < next.length; n  ){
       next[n].innerHTML = `[]`
    }
  });
}

<div class="flex flex-row product-star-con" id="w__stars"></div>

uj5u.com熱心網友回復：

另一種方法：

// Setting stars
const stars = [];
for (let i = 0; i <= 4; i  ) {
    stars.push({
    active: false,
    index: i
  });
}

const renderStars = (parentElement, stars, activeContent, notActiveContent) => {
    parentElement.innerHTML = '';
    stars.forEach(({ active, index }) => {
    parentElement.innerHTML  = `
        <span >${active ? activeContent : notActiveContent}</span>`;
  });
  
  Array.from(parentElement.querySelectorAll('.r__icon')).forEach((item, itemIndex) => {
    const star = stars.find(({ index }) => index === itemIndex);
    stars[star.index].element = item;
  
    item.addEventListener('click', (e) => {
        const itemElement = e.target;
      const starIndex = stars.findIndex(({ element }) => element === itemElement);
      if (starIndex === -1) {
        return;
      }
      
      const toActive = stars[starIndex].active !== true;
      stars = stars.map(star => {
        if (toActive) {
            // Set items before index to true, and after to false
            if (star.index <= starIndex) {
            return {
                ...star,
              active: true
            };
          }
          
          return {
            ...star,
            active: false
          };
        } else {
            // Set items after index to false, and before to true
          if (star.index >= starIndex) {
            return {
              ...star,
              active: false
            };
          }
          
          return {
            ...star,
            active: true
          };
        }
      });
      
      renderStars(parentElement, stars, activeContent, notActiveContent);
    });
  });
};

const setupStars = (stars, activeContent, notActiveContent) => {
    const parentElement = document.getElementById("w__stars");
  if (!parentElement) {
    return;
  }
  
  renderStars(parentElement, stars, activeContent, notActiveContent);
};

setupStars(stars, '[X]', '[ ]');

<div class="flex flex-row product-star-con" id="w__stars"></div>

標籤：javascript html jQuery 排名函数

上一篇：在超鏈接中使用javascript將空格替換為破折號？

下一篇：Sequelize：可選限制引數