创建基于 API 的星级评分系统

Question

我有一个 api，它会在“评级”下给出 1-5 的数字，我还有一个 5 星的列表，根据评级，这些星在点击按钮时会变成红色或黑色，红色将针对 Ratings 中的每个数字。即 4 的评级将把 4 颗星变成红色和 1 颗黑色。到目前为止，我已经创建了 html 和 css，但是当按下按钮时，我根本没有收到任何数据来测试按钮，我添加了一个基本警报，并且有效。到目前为止，我有这个：

演示：

$("#viewreview").click(function(){
    $.ajax("api link").done(function(data){
        $(".reviewblk").html('');
        var htmlstr = '';
        for(var i=0; i<data.length; i++){
            var rating = parseInt(data[i]["rating"]);
            var chk = ['', '', '', '', ''];
            for(var j=0; j<rating && j<5;j++){
                chk[j] = 'checked';
            }
            htmlstr += '<div class="preview"><img src="reviewicon1.jpg" alt="reviewpic" class="revImg" /><div class="stars"><p class="checked '+chk[0]+'"></p><p class="checked '+chk[1]+'"></p><p class="checked '+chk[2]+'"></p><p class="checked '+chk[3]+'"></p><p class="checked '+chk[4]+'"></p></div><h3 class="personName">'+data[i]["nickname"]+'</h3><div class="revtext"><p>'+data[i]["review"]+'</p></div></div><hr />';
        }
        $(".reviewblk").html(htmlstr);
    });
})

.productreviews{ /*sets font*/
    font-family: 'Roboto Condensed', sans-serif;
    
}
.preview{ /*sets padding for how the div is displayed*/
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
    display: block;
    position: relative;
}

.revImg{ /*gives images curved edges*/
    border-radius: 10px;
    display: inline;
}

.personName{ /*sets the person name so that it is to the right of the image and just below the stars*/
    display: inline;
    position: absolute;
    padding-left: 30px;
    padding-top: 20px;
    width: 150px;
}

.stars{ /*sets stars elements to above name and to the right of the image*/
    position: absolute;
    width: 100px;
    top: 30px;
    left: 180px;
    
}


.revtext{ /* displays the text div so that it is to the right side of the preview box*/
    display: inline;
    width: 550px;
    position: absolute;
    right: 0;
    font-size: 15px;
    font-weight: 600;
    top: 10px;
}

.revtext p{ /*i used word wrap to wrap the word onto the next line then used overflow to contain the overflowing text and then used text overflow so that any overflowing text would be shown as an ellipsis*/
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btnreview{ /* setting the padding for the buton aswell as the color so that the text is white and the button itself is red, aswell as giving it curved edges.*/
    padding: 10px 25px;
    background-color: #F0191C;
    color: white;
    border: none;
    border-radius: 10px;
}

.btnreview:hover{ /*changing the button when hovering and changing the cursor to a pointer*/
    background-color: #8a130b;
    cursor: pointer;
}

.btnblk{/* padding the button inside its div*/
    padding: 25px;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="productreviews"> <!--list of product reviews-->
  <hr />
  <h1 id = "productreviewheader">Product Reviews  <span class="checked">*****</span></h1>
  <hr />
  <div class="reviewblk">
    <div class="preview">
      <img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
      <div class="stars">
        <p class = "checked">*****</p>
      </div>
      <h3 class="personName">Great Greace!!</h3>
      <div class="revtext">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
          voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
          magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
        </p>
      </div>
    </div>
    <hr />

    <div class="preview">
      <img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
      <div class="stars">
        <p class = "checked">***<span class="unchecked">**</span></p>

      </div>
      <h3 class="personName">Great Greace!!</h3>
      <div class="revtext">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
          voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
          magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
        </p>
      </div>
    </div>
    <hr class = "separation line"/>

    <div class="preview">
      <img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
      <div class="stars">
        <p class = "checked">****<span class="unchecked">*</span></p>
      </div>
      <h3 class="personName">Great Greace!!</h3>
      <div class="revtext">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
          voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
          magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
        </p>
      </div>
    </div>
    <hr class = "separation line"/>

    <div class="preview">
      <img src="images/robot-juice-images/reviewicon2.jpg" alt="reviewpic" class="revImg" />
      <div class="stars">
        <p class = "checked">*****</p>
      </div>
      <h3 class="personName">This juice just keeps me going..</h3>
      <div class="revtext">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
          voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
          magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
        </p>
      </div>
    </div>
    <hr class = "separation line"/>
    </div>

  <div class="reviewblk">
    <div class="preview">
      <img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
      <div class="stars">
        <p class = "checked">*****</p>
      </div>
      <h3 class="personName">Great Greace!!</h3>
      <div class="revtext">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
          voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
          magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
        </p>
      </div>
    </div>
    <hr class = "separation line"/>
  </div>
  <div class="btnblk">
  <button class="btnreview" id="viewreview">READ ALL REVIEWS</button>
    </div>
</article>

Answer 1

请考虑以下事项。

$("#viewreview").click(function() {
  $.ajax("api link").done(function(data) {
    $(".reviewblk").html('');
    var rating, preview, stars;
    $.each(data, function(i, el) {
      preview = $("<div>", {
        class: "preview"
      }).appendTo(".reviewblk");
      $("<img>", {
        src: "reviewicon1.jpg",
        alt: "Review Icon",
        class: "revImg"
      }).appendTo(preview);
      stars = $("<div>", {
        class: "stars"
      }).appendTo(preview);
      rating = parseInt(el.rating);
      for (var i = 1; i <= 5; i++) {
        $("<p>", {
          class: (i <= rating ? "checked" : "unchecked")
        }).appendTo(stars);
      }
      $("<h3>", {
        class: "personName"
      }).html(el.nickname).appendTo(preview);
      $("<div>", {
        class: "revText"
      }).html("<p>" + el.review + "</p>").appendTo(preview);
      $("<hr>").appendTo(preview);
    });
  });
});

我们可以使用 jQuery 创建元素并在创建时附加它们。使用$.each()，我们可以迭代data 中的每个项目。我们也知道会有 5 个“检查”项目，所以我们可以简单地创建一个小循环来创建它们。其中一些，等于rating 将被“检查”，因此我们可以添加一个条件来检查每个并根据需要进行标记。

例如，如果rating 是 3，我们会看到：

<p class="checked"></p>
<p class="checked"></p>
<p class="checked"></p>
<p class="unchecked"></p>
<p class="unchecked"></p>

i 在第一次迭代时为 1，并且 1 小于 3。在第三次循环中，i 将为 3，并且仍然满足条件。当i 为4 或5 时，它不再是true，因此提供unchecked。