显示星级以进行评分答案

【问题标题】：Showing stars for rating显示星级以进行评分
【发布时间】：2021-08-01 18:56:41
【问题描述】：

大家好，我对评级项目有疑问。我正在向 api 发送评论并返回数字（评级），我想显示星星而不是数字。我将显示我的 jquery 代码。

 $(document).ready(function() {
        $(document).on('click', '#calculateProductRate', function(event) {
            event.preventDefault();
            calculateProductRate();

        });
        let ratingCalc = function(){
            let star = $(".score").html();
            let rating1= $('#star1');
            let rating2= $('#star2');
            let rating3= $('#star3');
            let rating4= $('#star4');
            let rating5= $('#star5');

            if(star == 1){
                rating2.css("display", "none");
                rating3.css("display", "none");
                rating4.css("display", "none");
                rating5.css("display", "none");
            }
            else if(star == 2){
                rating3.css("display", "none");
                rating4.css("display", "none");
                rating5.css("display", "none");
            }
            else  if(star == 3){
                rating4.css("display", "none");
                rating5.css("display", "none");
            }
            else if(star == 4){
                rating5.css("display", "none");
            }
            else if(star == 5){
            }

            console.log(star);
        }
        let calculateProductRate = function(){
            let text = $('textarea[name="aiTool"]').val();
                    ratingCalc();
            $.get( "{{ route('calculate-rate') }}", { text: text } )
                .done(function(data) {
                    $('#score').text(data);
            });
        }
    });

html

<section class="ai-tool paddinglr">
    <div class="row">
        <div class="col-12">
            <div class="ai-text">
                <h1> Try our AI tool</h1>
                <p>
                    We have developed a tool that converts words into actual rating number. That number can be presented as any graphic element you want. It is open to test it right here and right now. Multiple times.
                    We would be more than happy to hear a feedback from you. Feel free to contact us at hello@thevegansheep.com
                </p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="ai-form w-100">
            <div class="col-12 ">
                            <h4 for="aiTool">Try our Ai tool</h4>
                            <textarea name="aiTool" class="w-100" cols="30" width='100%' rows="5" placeholder="We have developed a tool that converts words into actual rate number. That number can be translated to icon,graphic or what ever you want.You can try it right here,right now."></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="ai-btn w-100">
            <div class="col-12">
                <button type="button" class="btn btn-gold btn-ai mt-4 px-4" id="calculateProductRate">Convert to rate</button>
            </div>
        </div>
    </div>
    <div class="row">
                <span id="score" class="score">3</span>
            <div class="rating m-auto">
                <div class="star mt-4">
                    <img src="./assets/images/star.png" id="star1" class="star1" alt="">
                    <img src="./assets/images/star.png" id="star2" class="star2" alt="">
                    <img src="./assets/images/star.png" id="star3"  class="star3" alt="">
                    <img src="./assets/images/star.png" id="star4" class="star4" alt="">
                    <img src="./assets/images/star.png" id="star5" class="star5" alt="">
                </div>
            </div>

    </div>
</section>

问题是，当我计算评分时，我必须点击两次才能获得星星（但第一次点击时会显示评级），它只适用于显示星星的 2 次。

【问题讨论】：

请包含所有相关代码，例如 html 和 css
发布 HTML 代码可以帮助人们重现您面临的问题，并了解问题（您可以在编辑器中使用 Javascript/HTML/CSS 代码 sn-p），从而使他们能够帮助您更容易。
@Silidrone 虽然您认为发布问题的可重现示例是正确的，但您应该要求他们使用 Stack Overflows sn-p 工具（编辑问题并使用 <>），然后示例将始终可用。
@CarstenLøvboAndersen 是的，我只记得这一点，并在您发表评论之前编辑了我的评论：D
刚刚发布的html代码

标签： javascript jquery api

【解决方案1】：

我认为您的问题是您在获得启动次数之前调用了ratingCalc()。你应该有它：

let calculateProductRate = function(){
   let text = $('textarea[name="aiTool"]').val();
   $.get( "{{ route('calculate-rate') }}", { text: text } )
      .done(function(data) {
           $('#score').text(data);
           ratingCalc();
      });
}

【讨论】：

【解决方案2】：

通过在内部传递数据来调用您的 ratingCalc(data) 方法 .done 方法。删除ratingCalc 方法中的第一行。

注意： 定义方法时使用const 而不是let （推荐），因为您不会重新分配变量其他定义。

const ratingCalc = function (star) {
  // let star = $(".score").html(); // remove this line
  let rating1 = $('#star1');
  let rating2 = $('#star2');
  // your code....
}

const calculateProductRate = function () {
  let text = $('textarea[name="aiTool"]').val();
  $.get("{{ route('calculate-rate') }}", { text: text })
    .done(function (data) {
      $('#score').text(data);
      ratingCalc(data);
    });
}

【讨论】：