如何在html和JavaScript中打星？

Question

我正在創建一個 HTML web 應用程序並從 API 調用中獲取所有數據。 我已將數據設置到一個數組中並顯示它們。 並且有帶有 HTML 標簽的數據。

我的數據集如下；

contDet = [
    {
      idappcontent: "Review1_Ques_01",
      content:
        '<img src="#FOLDERPATH#logo.png" style="width:600px;height: 150px">',
    },
    {
      idappcontent: "Review1_Ques_02",
      content:
        '<div style="color:black;font-size:1.3em;text-align:center;"><p>Your Opinion Is Important To Us</p></div><div style="color: black; text-align: justify;font-size: 1em;line-height: 21px;margin-left: 3%;margin-right: 3%;"><p>Please take a moment to share with us your thoughts on your visit today.</p></div>',
    },
    {
      idappcontent: "Review1_Ques_03",
      content: '<ul data-role="listview" id="Review1_Ques_04">',
    },
    {
      idappcontent: "Review1_Ques_06",
      content:
        '<a style="float: left;">< </a><a style="<a id="review1btn1" data-role="button" class="linkbtnPrevious"  onclick="R1goPrevious()"><B>PREVIOUS</B></a><a style="float: right;">> </a> <a id="review1btn" data-role="button"  class="linkbtnNext"  onclick="goNext()"><B>NEXT</B></a>',
    },
  ];
  contImg = [
    { idclient: "11", idlocation: "25", ImageName: "highlightedStar.png" },
    { idclient: "11", idlocation: "25", ImageName: "star.png" },
  ];
  surQue = [
    { idsurveyquestion: "22", question: "Taste of the food?" },
    { idsurveyquestion: "23", question: "Quality of the food?" },
    { idsurveyquestion: "24", question: "Speed Of delivery?" },
    { idsurveyquestion: "25", question: "The accuracy of the order?" },
    { idsurveyquestion: "26", question: "How is our service?" },
  ];

我需要為每個問題制作一個 5 星評級部分，如下所示。

這里我想對每個問題進行星級評分，再次點擊同一個星時需要取消選擇星。

這就是我嘗試過的；

 function getData() { contDet = [{ idappcontent: "Review1_Ques_01", content: '<img src="#FOLDERPATH#logo.png" style="width:600px;height: 150px">', }, { idappcontent: "Review1_Ques_02", content: '<div style="color:black;font-size:1.3em;text-align:center;"><p>Your Opinion Is Important To Us</p></div><div style="color: black; text-align: justify;font-size: 1em;line-height: 21px;margin-left: 3%;margin-right: 3%;"><p>Please take a moment to share with us your thoughts on your visit today.</p></div>', }, { idappcontent: "Review1_Ques_03", content: '<ul data-role="listview" id="Review1_Ques_04">', }, { idappcontent: "Review1_Ques_06", content: '<a style="float: left;">< </a><a style="<a id="review1btn1" data-role="button" class="linkbtnPrevious" onclick="R1goPrevious()"><B>PREVIOUS</B></a><a style="float: right;">> </a> <a id="review1btn" data-role="button" class="linkbtnNext" onclick="goNext()"><B>NEXT</B></a>', }, ]; contImg = [{ idclient: "11", idlocation: "25", ImageName: "highlightedStar.png" }, { idclient: "11", idlocation: "25", ImageName: "star.png" }, ]; surQue = [{ idsurveyquestion: "22", question: "Taste of the food?" }, { idsurveyquestion: "23", question: "Quality of the food?" }, { idsurveyquestion: "24", question: "Speed Of delivery?" }, { idsurveyquestion: "25", question: "The accuracy of the order?" }, { idsurveyquestion: "26", question: "How is our service?" }, ]; //set content document.getElementById("Review1_Ques_01").innerHTML = contDet[0].content; document.getElementById("Review1_Ques_02").innerHTML = contDet[1].content; document.getElementById("Review1_Ques_03").innerHTML = contDet[2].content; document.getElementById("Review1_Ques_06").innerHTML = contDet[3].content; //set star image path //geting star img var starImg = contImg.filter(function(item) { return item.ImageName.includes("star"); }); // console.log(starImg); var starImgpath = "./images/" + starImg[0].idclient + "/" + starImg[0].idlocation + "/" + starImg[0].ImageName; //geting highlightedStar img var highlightedStarImg = contImg.filter(function(item) { return item.ImageName.includes("star"); }); console.log(starImg); var highlightedStarImgpath = "./images/" + highlightedStarImg[0].idclient + "/" + highlightedStarImg[0].idlocation + "/" + highlightedStarImg[0].ImageName; // display question list $.each(surQue, function(o, que) { $("#Review1_Ques_04").append( "<li id=" + que.idsurveyquestion + ">" + que.question + "</li>" ); }); }

 #Review1_Ques_04 { list-style-type: none; }

 <script src="js/Test.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <body onload="javascript:getData()"> <div id="Review1"> <div data-role="content"> <div id="Review1_Ques_01" class="Header-banner"></div> <div id="Review1_Ques_02"></div> <div id="Review1_Ques_03" style="margin-left:5%;margin-right:5%"></div> </div> <div data-role="footer"> <div id="Review1_Ques_06"></div> </div> </div> </body>

這是我試過的output；

在這里，我想使用我的星星和突出顯示的星星 png 來制作如下評級之星，

<img  onClick="rate()"  ondblclick="uncheckAllStars()" class="star" src="./images/11/25/star.png" />

src應該從js文件中設置，圖像數據也來自API。我的文件夾路徑是images->11->25。

請幫我解決我的問題。

我需要創建一個這樣的部分；

<p class="ques">Taste of the food?</p>
    <div class="str">
        <img  onClick="rate()"  class="star" id="1" src="./images/11/25/star.png" />
        <img  onClick="rate()"  class="star" id="2" src="./images/11/25/star.png" />
        <img  onClick="rate()"  class="star" id="3" src="./images/11/25/star.png" />
        <img  onClick="rate()"  class="star" id="4" src="./images/11/25/star.png" />
        <img  onClick="rate()"  class="star" id="5" src="./images/11/25/star.png" />
    </div>

我怎樣才能創建一個像上面這樣的部分？

Answer 1

自從你

不知道如何為每個問題打分

您需要做的第一件事是對每個問題進行評分的方法：這是 CSS 中處理的一種方法

 document.querySelectorAll('.rating').forEach(rating => { rating.addEventListener('input', function() { console.log(this.value); }); rating.addEventListener('dblclick', function() { this.value = this.min; this.style.setProperty('--value', 1); console.log(this.value); }); });

 .rating { --dir: right; --fill: gold; --fillbg: rgba(100, 100, 100, 0.15); --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>'); --stars: 5; --starsize: 1rem; --value: 1; --x: calc(100% * (var(--value) / var(--stars))); block-size: var(--starsize); inline-size: calc(var(--stars) * var(--starsize)); position: relative; touch-action: manipulation; -webkit-appearance: none; } [dir="rtl"].rating { --dir: left; }.rating::-moz-range-track { background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x)); block-size: 100%; mask: repeat left center/var(--starsize) var(--star); }.rating::-webkit-slider-runnable-track { background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x)); block-size: 100%; mask: repeat left center/var(--starsize) var(--star); -webkit-mask: repeat left center/var(--starsize) var(--star); }.rating::-moz-range-thumb { height: var(--starsize); opacity: 0; width: calc(var(--starsize) / 2); }.rating::-webkit-slider-thumb { height: var(--starsize); opacity: 0; width: calc(var(--starsize) / 2); -webkit-appearance: none; }.rating, .rating-label { display: block; font-family: ui-sans-serif, system-ui, sans-serif; }.rating-label { margin-block-end: 1rem; }

 <label class="rating-label">Rating 1 <input class="rating" min="1" max="5" oninput="this.style.setProperty('--value', this.value)" step="1" type="range" style="--value:2" value="2"> </label> <label class="rating-label">Rating 2 <input class="rating" min="1" max="5" oninput="this.style.setProperty('--value', this.value)" step="1" type="range" style="--value:3;--starsize:2rem" value="3"> </label>