Star ratings in WEX5

Create a new blank. w file, then put 5 img Star pictures on the page

The important thing is that the picture path can not be absolute path, to use relative path, otherwise JS operation will be a bug

Add two label tags (tag as you choose, I'll use a label here)

You can use his own XID to control or customize an ID.

Next is the JS section.

Double-click Back to jump to JS section, it will automatically create a click event

Here is the operating source code:

Debugger
for (var i = 0;i <$ ("img"). length;i++) {

EndsWith determines whether the end of a character matches a specified string
if ($ ("img"). EQ (i). attr (' src '). EndsWith ("Red.png")) {
$ ("img"). EQ (i). attr (' src ', ' img/star-yellow.png ');
}
}
var index = event.currenttarget.dataset.index-0;
for (var i = 0;i <=index;i++) {
$ ("img"). EQ (i). attr (' src ', ' img/star-red.png ');
}
Index-0 is implicitly converted to number
$ ("#score"). Text (index + 1 + ' min '). css;
var x;
Switch (index) {
Case 0:x= "(very dissatisfied with the seller's description of the serious discrepancy)";
Break
Case 1:x= "(inconsistent with seller's description, not satisfied)";
Break
Case 2:x= "(not as good as seller description)";
Break
Case 3:x= "(as the seller describes the basic agreement, or very satisfied with)";
Break
Case 4:x= "(fully consistent with seller's description, very satisfied)";
Break
}
$ ("#s"). Text (x);

Star ratings in WEX5