我有一个评级明星动画,点击应该使父级(跨度)激活一个类。 我有多个评级,我有 1 到 5 星评级,半评级也应该有效。
目前我可以增加。 但我不能从说 4 回到 1
请看看我的演示,以获得一个“完整”的工作示例
这是一个 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>
答案 0 :(得分:0)
如果您使用自定义元素(所有现代浏览器都支持)在所有 SVG 客户端创建所有 SVG 会更容易:
M0 0h100v100h-100v-100
使其成为逆星0 0 N 100
视图框中创建了一个新的 SVG 文件以适合所有星星..见下文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>