Question

嘿，我对评级项目有疑问。我正在向 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 次才能显示星星。

Answer 1

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

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

Answer 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);
    });
}

显示星级以进行评分

2 个答案: