使用rateYo我得到了4行星星，它们可以很好地工作，但是，我被要求仅通过键盘使它们成为必需。
我确实在所有星星上添加了tabindex="0"，所以我可以通过按Tab键，变体，按Enter或空格键来触发它们。这就是我现在得到的内容（只有一行，但其他行的制作方式相同）
$(".stars-range").rateYo({
starWidth: "30px",
normalFill: "#bbb",
ratedFill: "#00897b",
minValue: 0,
maxValue: 5,
numStars: 5,
spacing: "10px",
fullStar: true,
onChange: function (rating, rateYoInstance) {
var ID = $(this).attr('id');
$('#range-'+ID).val(rating);
}
});
$('polygon').keypress(e => {
var self = $(e.target)
var KeyID = e.keyCode;
if(KeyID == 13 || KeyID == 32) {
e.preventDefault();
self.click();
}
})<div class="row m-tb-20">
<div class="col s4 sp_text-right">
<label for="usability">Navegação</label>
</div>
<div class="col s6 rel">
<div class="stars-range jq-ry-container" id="usability" data-target="usability" style="width: 190px;">
<div class="jq-ry-group-wrapper">
<div class="jq-ry-normal-group jq-ry-group">
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#bbb">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " tabindex="0"></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#bbb" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " tabindex="0"></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#bbb" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " tabindex="0"></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#bbb" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " tabindex="0"></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#bbb" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 " tabindex="0"></polygon>
</svg>
</div>
<div class="jq-ry-rated-group jq-ry-group" style="width: 0%;">
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#00897b">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#00897b" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#00897b" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#00897b" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
<!--?xml version="1.0" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.705 512 486.59" x="0px" y="0px" xml:space="preserve" width="30px" height="30px" fill="#00897b" style="margin-left: 10px;">
<polygon points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
</svg>
</div>
</div>
</div>
<input type="hidden" name="usability" id="range-usability" value="0">
</div>
</div>
它不起作用。我试图弄清楚当通过Tab键将焦点对准星星并按下Enter /空格键但没有成功时如何伪造星星。有什么想法吗？