Hola a todos, tengo un problema con la calificación del proyecto. Estoy enviando un comentario a la API y tengo el número (calificación) de vuelta y quiero mostrar las estrellas en lugar del número. mostraré mi código 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);
            });
        }
    });
</script>

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>

El problema es que, cuando calculo la calificación, tengo que hacer clic dos veces para tener estrellas (pero la calificación se muestra en el primer clic) y solo funciona 2 veces para mostrar estrellas.

0
Amir Alibašić 11 may. 2021 a las 14:55

2 respuestas

La mejor respuesta

Creo que tu problema es que estás llamando a ratingCalc() antes de obtener el número de inicios. Deberías tener eso en su lugar:

let calculateProductRate = function(){
   let text = $('textarea[name="aiTool"]').val();
   $.get( "{{ route('calculate-rate') }}", { text: text } )
      .done(function(data) {
           $('#score').text(data);
           ratingCalc();
      });
}
0
Cedric Cholley 11 may. 2021 a las 12:11

Llame a su método ratingCalc(data) pasando datos dentro Método .done. Elimina la primera línea dentro del método ratingCalc.

Nota: utilice const en lugar de let al definir el método (Recomendado), porque no reasignará la variable con otra definición.

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);
    });
}
0
Rahul Kumar 11 may. 2021 a las 12:34