你能得到.length of svg的个数来创建一个评分吗?

Question

不确定这是否可行，但是否有一种方法可以使用。length或其他方法来获得通常以svg形式显示的评分?

在下面的HTML中，每个svg都有一个"g填充"这决定了输出的内容。

• "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

您可以直接选择g元素，将返回的NodeList转换为数组(这里使用扩展语法)，并通过fill属性将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 2

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

你将无法以同样的方式选择半星，所以我建议在'productStar'div中添加一个'halfStars'类。这将给你:

<svg class="productStar halfStar"> ..... </svg>
let halfStars = document.querySelectorAll('.halfStar').length / 2

你实际上可以把'activeStar'和'inactiveStar'作为类放在其他svg中，使事情更简单。最后你会看到:

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

Answer 3

您可以为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
)
);