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添加一个类并使用Class Selector：

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

如果你不想使用课程，你可能想要做@John Wu所建议的。它的工作原理相同。

然后，要知道哪个div触发了该功能，您可以使用event.target：

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

希望这能回答你的问题。

Answer 2

如果您想将处理程序应用于除了最后的数字之外具有相同名称的多个DIV，您可以"starts with" selector：

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

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>

简单的评级系统

3 个答案: