你能得到 .length of number of svgs 来创建评分吗？

Question

不确定这是否可行，但是有没有一种方法可以使用 .length 或其他方法来获取通常以 svg 形式显示的内容的评分？

在下面HTML的每个 svg 中都有一个“g fill”，它决定了输出的内容。

“var(--review-star-active)”= 1 星
"url('#57_rating-half-star')" = 半星
“var(--review-star-inactive)”= 0 星

有没有办法在这里使用 .length 来确定评级是什么？在这种情况下应该是 3.5 星。

document.querySelector(".productRating").insertAdjacentHTML("afterend", "Review is: " + document.querySelectorAll('.productStar').length);

<div class="productRating">
  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
    <g fill="var(--review-star-active)">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>
  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
  <g fill="var(--review-star-active)">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>
  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
  <g fill="var(--review-star-active)">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>
  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
  <g fill="url('#57_rating-half-star')">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>
  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
  <g fill="var(--review-star-inactive)">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>
</div>

Answer 1

您可以将另一个 class 添加到 productStar 元素并使用它来计算评分

  <svg class="productStar productStar--filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
  <g fill="var(--review-star-active)">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>
  <svg class="productStar productStar--half" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
  <g fill="url('#57_rating-half-star')">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>
  <svg class="productStar productStar--empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">
  <g fill="var(--review-star-inactive)">
    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>
    </g></svg>

那你就可以了

document.querySelector(".productRating").insertAdjacentHTML("afterend",
  "Review is: " + (
    document.querySelectorAll('g[fill="var(--review-star-active)]"').length +
    document.querySelectorAll('g[fill~="url"]').length * 0.5
  )
);

Answer 2

可以直接selectg元素，通过fill属性转换返回的NodeList to an array (here using spread syntax) and filter()；一次是 full 颗星，一次是 half 颗星。

const stars = [...document.querySelectorAll('.productStar g')];

const fullCount = stars.filter(g =>
  g.getAttribute('fill') === 'var(--review-star-active)').length;

const halfCount = stars.filter(g =>
  g.getAttribute('fill').includes('half-star')).length;

console.log(fullCount + halfCount / 2);

<div class="productRating">  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">    <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="url('#57_rating-half-star')">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-inactive)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg></div>

ES5

var stars = [].slice.call(document.querySelectorAll('.productStar g'));

var fullCount = stars.filter(function (g) {
  return g.getAttribute('fill') === 'var(--review-star-active)';
}).length;

var halfCount = stars.filter(function (g) {
  return g.getAttribute('fill').indexOf('half-star') !== -1;
}).length;

console.log(fullCount + halfCount / 2);

<div class="productRating">  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">    <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="url('#57_rating-half-star')">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-inactive)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg></div>

迭代每个 productRating

的示例

var ratings = document.querySelectorAll('.productRating');

ratings.forEach(function (rating) {
  var stars = [].slice.call(rating.querySelectorAll('.productStar g'));

  var fullCount = stars.filter(function (g) {
    return g.getAttribute('fill') === 'var(--review-star-active)';
  }).length;

  var halfCount = stars.filter(function (g) {
    return g.getAttribute('fill').indexOf('half-star') !== -1;
  }).length;

  rating.insertAdjacentHTML("afterend", "Review is: " + (fullCount + halfCount / 2));
});

<div class="productRating">  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">    <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="url('#57_rating-half-star')">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-inactive)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg></div>

<div class="productRating">  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">    <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-active)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="url('#57_rating-half-star')">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-inactive)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg>  <svg class="productStar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" width="18" height="18">  <g fill="var(--review-star-inactive)">    <polygon points="9 13.5 3.70993273 16.2811529 4.72024568 10.3905765 0.440491353 6.21884705 6.35496636 5.35942353 9 0 11.6450336 5.35942353 17.5595086 6.21884705 13.2797543 10.3905765 14.2900673 16.2811529"></polygon>    </g></svg></div>

Answer 3

let fullStars = document.querySelectorAll('.productStar > g[fill="var(--review-star-active)"').length

您将无法以同样的方式 select 半星，因此我建议在 'productStar' [中加入 class 'halfStars' div。这会给你：

<svg class="productStar halfStar"> ..... </svg>

let halfStars = document.querySelectorAll('.halfStar').length / 2

您实际上可以将 'activeStar' 和 'inactiveStar' 作为 classes 放在其他 svg 中以使事情变得更简单。所以最后你会留下：

let rating = fullStars + halfStars
document.querySelector(".productRating").insertAdjacentHTML("afterend", "Review is: " + rating);

你能得到 .length of number of svgs 来创建评分吗？

Can you get .length of number of svgs to create a rating score?

javascript

svg

variable-length