简单的评级系统

Question

我正在尝试做一个评级系统，但我遇到了一些问题。

这是我的 html:

                    <div id="div-stars1">                   
                        <img src="assets/imagens/star_empty_na.png" style="width: 25px" id="img-starsna">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star1">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star2">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star3">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star4">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star5">                              
                    </div>

                    <div id="div-stars2">                   
                        <img src="assets/imagens/star_empty_na.png" style="width: 25px" id="img-starsna">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star6">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star7">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star8">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star9">
                        <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star10">                             
                    </div>

好吧，我需要几个这样的块代码，但我不希望有很多功能（# div-stars3，# div-stars4。 .. #divstars20).是的，我的投票中有很多问题，但我不想重复代码，我的意思是，我不想编写任何相同的代码（$（“#div-stars1”）.mouseover（ function () {....}), $("#div-stars2").mouseover(function () {....}), $("#div-stars3" )..... 所以，我想要一些建议。我喜欢干净、精简和动态的代码。

我只用一个区块码div做了评级系统，不超过一个。现在我需要处理很多块代码，很多问题和很多星星，每一个都回答你的 <div>

谢谢。

Answer 1

如果要将处理程序应用于除末尾数字外具有相同名称的多个 DIV，可以 "starts with" selector:

$("DIV[ID^='divstars']").mouseover(etc.)

Answer 2

您可以将 class 添加到所有 div 并使用 Class Selector:

$( ".class" ).on( "mouseover", function() {
  ...
});

如果您不想使用 classes，您可能想按照@John Wu 的建议进行操作。效果一样。

然后，要知道哪个div触发了函数，可以使用event.target:

$( ".class" ).on( "mouseover", function() {
  // alert the id of the hovered div
  alert( event.target.id );
});

希望这能回答您的问题。

Answer 3

尝试此代码以获得基于星级的评级系统。

<!DOCTYPE html>
<html>

<head>
  <!-- Font Awesome Icon Library -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    #priorityFlag {
      color: rgb(241, 241, 70);
      font-size: 1em;
      padding: 0.25em;
      border-width: 1px;
      border-style: solid;
      border-radius: 50%;
    }
    
    .fa-star {}
    
    .fa-star:hover {
      cursor: pointer;
    }
    
    .checkedStar {
      color: rgb(248, 248, 41);
    }
    
    #ratingBox {
      width: 150px;
    }
    
    #ratinngBox::after {
      content: '';
      display: block;
      clear: both;
    }
    
    #starsBox {
      
      float: left;
      width: 70%;
    }
    
    #flagBox {
      width: 30%;
      float: right;
    }
  </style>
</head>

<body>

  <h2>Star Rating</h2>
  <div id="ratingBox">
    <div id="starsBox">
      <span class="fa fa-star checkedStar" data-priority-value="0" data-status-marked="true"></span>
      <span class="fa fa-star" data-priority-value="1" data-status-marked="false"></span>
      <span class="fa fa-star" data-priority-value="2" data-status-marked="false"></span>
      <span class="fa fa-star" data-priority-value="3" data-status-marked="false"></span>
      <span class="fa fa-star" data-priority-value="4" data-status-marked="false"></span>
    </div>
    <div id="flagBox">
      <span class="fa fa-flag" id="priorityFlag"></span>
    </div>
  </div>

  <script>
    var stars = document.getElementsByClassName("fa-star");
    // console.log("obj of strs array",stars);
    Array.prototype.forEach.call(stars, (star) => star.addEventListener("click", setPriority));

    var rateColors = ['rgb(248, 248, 41)', 'gold', 'orange', 'darkorange', 'red'];
    var flag = document.getElementById("priorityFlag");


    function setPriority(event) {
      var star = event.srcElement;
      var priority = star.getAttribute("data-priority-value");
      //  console.log("proirity is ",priority);
      var index = priority;

      var markedStar = star.getAttribute("data-status-marked");
      // console.log("is this star marked status",markedStar,"index is ",index);
      if (markedStar == "false")
        markStar(index);
      else //if(markedStar=="true")
        unMarkStar(index);
      // else
      // console.log("extremly wrong happening in setPriority function");
    }

    function markStar(index) {

      for (let i = 0; i <= index; i++) {
        stars[i].style.color = rateColors[index];
        // console.log("inside markStar marking "+i+" th star marked");
        stars[i].setAttribute("data-status-marked", "true");

        // console.log("true marked obj",stars[i],"marked status is",stars[i].getAttribute("data-status-marked"));
      }
      updateFlag(index);
    }

    function unMarkStar(index) {
      for (let i = 1; i < stars.length; i++) {
        // console.log("marking",`${i}`,stars[i]);
        stars[i].style.color = 'black';
        stars[i].setAttribute("data-status-marked", "false");
      }
      // console.log("inside umMarkStar",index,` nextline is markStar(${index})false`);
      markStar(index);

    }

    function updateFlag(index) {

      // console.log("update flag acc to",index,rateColors[index]);//updating flag color to this index of flagColors array
      flag.style.color = rateColors[index];
      flag.style.borderColor = rateColors[index];


    }
  </script>
</body>

</html>

简单的评级系统

Simple rating system

javascript

jquery

image

rating-system