如何为Zurb星级评分选中星星添加half类实现半填充（#e54800）

Hey there! Let's get that half-star functionality working for your Foundation star rating component. I've broken down the solution into easy steps to get you the exact <div class="star selected half"> structure and half-filled #e54800 background you want:

1. Update Your HTML Structure #

First, make sure your star elements can accept both the selected and half classes. Here's an example of how your rating markup might look with a half-star included:

<div class="star-rating">
  <div class="star selected"></div>
  <div class="star selected"></div>
  <div class="star selected half"></div> <!-- This is your half-filled star -->
  <div class="star"></div>
  <div class="star"></div>
</div>

2. Add CSS for the Half-Star Effect #

The key here is using a linear gradient to fill only 50% of the star with your desired color. The approach varies slightly depending on how the original Foundation component renders stars:

Case 1: Stars use direct background color on the .star element

If your base star styles apply the background directly to the <div>, add this CSS:

/* Base selected star style (keep your existing Foundation styles here) */
.star.selected {
  background-color: #e54800;
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  display: inline-block;
  margin: 0 2px;
}

/* Half-star override */
.star.selected.half {
  background: linear-gradient(to right, #e54800 50%, transparent 50%);
}

Case 2: Stars use a pseudo-element (like ::before) for styling

Many star components use pseudo-elements to draw the star shape. If that's the case for your Foundation block, target the pseudo-element instead:

/* Base unselected star (keep existing styles) */
.star::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background-color: #ddd; /* Unselected color */
}

/* Full selected star (keep existing styles) */
.star.selected::before {
  background-color: #e54800;
}

/* Half-star override */
.star.selected.half::before {
  background: linear-gradient(to right, #e54800 50%, #ddd 50%);
}

3. (Optional) Dynamic Rating with JavaScript #

If you need to set the rating dynamically (e.g., from a database value like 3.5), use this function to apply the correct classes automatically:

function setStarRating(ratingValue) {
  const stars = document.querySelectorAll('.star');
  
  stars.forEach((star, index) => {
    // Reset all star classes first
    star.classList.remove('selected', 'half');
    
    // Apply full selected class to stars before the half-star
    if (index + 1 <= Math.floor(ratingValue)) {
      star.classList.add('selected');
    }
    // Apply half class to the star that needs partial filling
    else if (index + 1 === Math.floor(ratingValue) + 1 && ratingValue % 1 !== 0) {
      star.classList.add('selected', 'half');
    }
  });
}

// Example usage: Set a 3.5 star rating
setStarRating(3.5);

Quick Notes #

• The clip-path value ensures the gradient stays within the star shape—keep this matching your existing star styling.
• If you have hover states, extend the half-star CSS to include hover styles (swap #e54800 with your hover color in the gradient).

内容的提问来源于stack exchange，提问作者Brad