jquery function in php foreach loop show The result of the first product appears in the rest of the products

Question

as you can see the first product is 4,5 stars rating and it apply for the rest of the product.I have function called (rateYo) its Turn numbers into stars. So I want to use this function to show star rating for all my products. but when I use it, its show the only first result to other result. for example - If the rating for the first product is four stars, it will be the same for the rest of the products. I want to make each product appear with its own rating.

I change the from ID to class for to show in foreach loop. this is my function

<script  type='text/javascript'>
                                                                      $(function () {
                                                                          $(".ratYo").rateYo({
                                                                            rating: <?php echo $list['averageRating']?>,
                                                                          starWidth:"20px",
                                                                            readOnly: true
                                                                          });
                                                                      });
                                                                  </script>

and this is my code in html

 <?php
foreach($pro as $list){
?>
<div style="left: -60px;position: relative; class="ratYo">
    <script>
             $(function () {
              $(".ratYo").rateYo({
               rating: <?php echo $list['averageRating']?>,
                  starWidth:"20px",
                  readOnly: true
                      });
                        }); </script>
</div>

I imagine the `$(".ratYo").rateYo({})` call is inside a (PHP) foreach right? — DarkBee, Feb 03 '23 at 10:00
_"I change the from ID to class"_ - that alone doesn't help much - `$(".ratYo")` selects _all_ elements with that class across the whole document, that exist at the time when this executes. Something like this should rather not be done by creating individual script blocks for each element to begin with. You should put the rating value onto the respective div itself, as a custom data attribute. And then you write _one_ JS code, that loops over all `.ratYo` elements, reads the value from the data attribute, and then initializes the `rateYo` plugin with that value, for the current element only. — CBroe, Feb 03 '23 at 10:08
What's your question about all this code? Is this a JS problem, or a PHP problem? Also, if this is related to MySQL, why haven't you shared any such code? — Nico Haase, Feb 03 '23 at 10:12

DarkBee · Answer 1 · 2023-02-03T10:29:50.163

With you current code you are just overwriting each div.ratYo's content (with the current value of $list['rating']), because you are calling the function each time in the PHP's foreach loop.

You could consider storing the average rating in a custom data-attribute, e.g. data-rating, and use this value in your javascript to pass the correct value to the plugin:

<?php
    foreach($pro as $list){
?>
<div style="left: -60px;position: relative;" class="ratYo" data-rating="<?= $list['averageRating']; ?>">
<?php
    }
?>

Instead of running the javascript code directly in your foreach, you can now move the javascript outside the foreach and make it only run once,

<script>
$(function() {
    $('div.rateYo').each(function() {
        $(this).rateYo({
            rating: $(this).data('rating'), //fetch the rating we've set in PHP
            starWidth:"20px",
            readOnly: true
        });
    });
});
</script>

note

<?= is just a short-hand echo in PHP

jquery function in php foreach loop show The result of the first product appears in the rest of the products

1 Answers1