javascript多重评级SVG *点击

Question

我有一个评级星星动画，点击应该使父(span)与类活动。我有多个评级，我有1到5星级的评级，也有一半的评级应该工作。

目前我可以增加。但是我不能从4回到1

请看看我的"full"的演示吧。工作示例

这是一个js css的挑战:-)

JS

var ratingElemOne = $('.ratingOne input[name="starOne"]');

ratingElemOne.change(function (e) {
if (this.checked) {
$(this).parent().addClass("active");
}
});

var ratingElemTwo = $('.ratingTwo input[name="starTwo"]');
ratingElemTwo.change(function () {
if (this.checked) {
$(this).parent().addClass("active");
}
});

HTML

<div class="col-8 md-col-8 pt2 relative">
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="starOne" viewBox="0 0 28 28" preserveAspectRatio="xMaxYMax meet">
<title>Star Rating</title>
<path class="starOne" d="M13.996,22.501 L22.649,27.997 L20.352,17.637 L27.996,10.667 L17.930,9.768 L13.996,-0.003 L10.063,9.768 L-0.003,10.667 L7.641,17.637 L5.345,27.997 L13.996,22.501 Z" />
</symbol>
</svg>
<p>Value for money?</p>
<div class="rating ratingOne">
<fieldset class="rating-fieldset">
<span>
<input type="checkbox" id="starOne5" class="rating-checkbox" value="5" name="starOne" /><label class="full" for="star5" title="Awesome - 5 stars">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
<input type="checkbox" id="star4half" class="rating-checkbox" value="4.5" name="starOne" /><label class="half" for="star4half" title="Pretty good - 4.5 stars" name="star">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
</span>
<span>
<input type="checkbox" id="star4" class="rating-checkbox" value="4" name="starOne" /><label class="full" for="star4" title="Pretty good - 4 stars">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
<input type="checkbox" id="star3half" class="rating-checkbox" value="3.5" name="starOne" /><label class="half" for="star3half" title="Meh - 3.5 stars">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
</span>
<span>
<input type="checkbox" id="star3" class="rating-checkbox" value="3" name="starOne" /><label class="full" for="star3" title="Meh - 3 stars" name="star">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
<input type="checkbox" id="star2half" class="rating-checkbox" value="2.5" name="starOne" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
</span>
<span>
<input type="checkbox" id="star2" class="rating-checkbox" value="2" name="starOne" /><label class="full" for="star2" title="Kinda bad - 2 stars">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
<input type="checkbox" id="star1half" class="rating-checkbox" value="1.5" name="starOne" /><label class="half" for="star1half" title="Meh - 1.5 stars">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
</span>
<span>
<input type="checkbox" id="star1" class="rating-checkbox" value="1" name="starOne" /><label class="full" for="star1" title="Sucks big time - 1 star">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
<input type="checkbox" id="starhalf" class="rating-checkbox" value="0.5" name="starOne" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars">
<svg role="img" aria-label="rating">
<use xlink:href="#starOne"></use>
</svg>
</label>
</span>
<small>Rate Now</small>
</fieldset>
</div>
</div>

https://jsfiddle.net/davidesitua/mq2xfp9L/

Answer 1

如果您使用自定义元素(在所有现代浏览器中都支持)创建所有SVG客户端，则更容易:

• 只复制了d-path从星形图标
• 将https://yqnn.github.io/svg-path-editor/中的d-path编辑为100x100viewBox/网格
• 使其成为的逆通过将M0 0h100v100h-100v-100附加到路径
• 在0 0 N 100viewBox中创建了一个新的SVG文件，以适合所有星星。见下文
• 添加了背景矩形黄金设置颜色等级
• 使用逆星，每颗在x-偏移
• 添加矩形覆盖所有half-stars
• 设置每个"半星"上的内联事件onclick和onmouseover

<star-rating stars=5 rating="3.5"
bgcolor="green" nocolor="grey" color="gold"></star-rating>
<star-rating stars=7 rating="50%"
bgcolor="rebeccapurple" nocolor="beige" color="goldenrod"></star-rating>
<script>
document.addEventListener("click", (evt) => console.log(evt.target.getAttribute("n")))
customElements.define("star-rating", class extends HTMLElement {
set rating( rate ) {
if (!String(rate).includes("%")) rate = Number(rate) / this.stars * 100 + "%";
this.querySelector("#rating").setAttribute("width", rate);
}
connectedCallback() {
let { bgcolor, stars, nocolor, color, rating } = this.attributes;
this.stars = ~~stars.value || 5;
this.innerHTML = 
`<svg viewBox="0 0 ${this.stars*100} 100" style="cursor:pointer;width:300px">`
+ `<rect width="100%" height="100" fill="${nocolor.value}"/>`
+ `<rect id="rating"  height="100" fill="${color.value}"  />`
+ Array(  this.stars     ).fill()
.map((i, n) => `<path fill="${bgcolor.value}" d="M${ n*100 } 0h102v100h-102v-100m91 42a6 6 90 00-4-10l-22-1a1 1 90 01-1 0l-8-21a6 6 90 00-11 0l-8 21a1 1 90 01-1 1l-22 1a6 6 90 00-4 10l18 14a1 1 90 010 1l-6 22a6 6 90 008 6l19-13a1 1 90 011 0l19 13a6 6 90 006 0a6 6 90 002-6l-6-22a1 1 90 010-1z"/>`)
.join("")
+ Array(  this.stars * 2 ).fill()
.map((i, n) => `<rect x="${ n*50 }" n="${n}" opacity="0" width="50" height="100"`
+ ` onclick="dispatchEvent(new Event('click'))" `
+ ` onmouseover="this.closest('star-rating').rating = ${(n+1)/2}"/>`)
.join("") 
+ "</svg>";
this.rating = rating.value;
}
});
</script>