将新数据重新加载到 5 星评级系统中

Question

我有一个 autoload_process.php 文件，我从数据库中检索信息并打印它。我检索和打印的信息之一是评级。我在这个文件中也有我的脚本来打印评分。

<script type="text/javascript">
$(function() {
$('span.stars').stars();
});

$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
</script>

    //Provide the group that is going to be load
    $group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

    // To show 3 results at a time
    $items_per_group = 3;

    //get current starting point of records
    $position = ($group_number * $items_per_group);
    $city = filter_var($_POST["nameofcity"]);

    //Limit our results within a specified range.
    $db = pg_connect("$db_host $db_name $db_username $db_password");
    $query = "SELECT * FROM menu where city='$city' ORDER BY rating DESC LIMIT $items_per_group OFFSET $position";
    $rating = $myrow[rating];
    echo '<span class="stars">'; 
    echo $rating;
    echo '</span>'; 

第一次加载页面时一切正常，但我遇到的问题是，当我一直滚动到底部并且页面重新加载新信息时，评级会发生变化。似乎每次加载一组新数据时，所有先前的评级都设置为最大值或默认值“5 Starts”（我猜是因为 autoload.process.php 文件再次运行）

示例：（假设我一次加载 3 个结果）

首次加载：

Hotel 1 -->  Rating 5  (This is correct)    
Hotel 2 -->  Rating 4  (This is correct)    
Hotel 3 -->  Rating 3  (This is correct)

现在我到达页面底部并加载下一个信息（第二次加载）：

Hotel 1 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 2 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 3 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 4 -->  Rating 2  (This is correct)    
Hotel 5 -->  Rating 1  (This is correct)    
Hotel 6 -->  Rating 3  (This is correct)

现在我到达页面底部并加载下一个信息（第三次加载）：

Hotel 1 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 2 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 3 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 4 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 5 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 6 -->  Rating 5  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 7 -->  Rating 3  (This is correct)    
Hotel 8 -->  Rating 2  (This is correct)    
Hotel 9 -->  Rating 1  (This is correct)

我认为问题在于 audtoload_process.php 文件中有这段代码

<script type="text/javascript">
$(function() {
$('span.stars').stars();
});

$.fn.stars = function() {
  return $(this).each(function() {
  $(this).html($('<span />').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));
});
}
</script>

尤其是这行代码：

$(this).html($('<span />').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));

另外，如果我将 Math.min(5,parseFloat 中的值从 5 更改为 1，当新数据加载时，之前的值会更改为 1 而不是 5。例如： 首次加载：

Hotel 1 -->  Rating 5  (This is correct)    
Hotel 2 -->  Rating 4  (This is correct)    
Hotel 3 -->  Rating 3  (This is correct)

现在我到达页面底部并加载下一个信息（第二次加载）：

Hotel 1 -->  Rating 1  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 2 -->  Rating 1  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 3 -->  Rating 1  (This is INCORRECT) filled with default value (Hotel1)    
Hotel 4 -->  Rating 2  (This is correct)    
Hotel 5 -->  Rating 1  (This is correct)    
Hotel 6 -->  Rating 3  (This is correct)

但如果我不在那里包含它，那么开始不会填满，我会看到类似的内容：（开始时没有填充开始顶部的值）

如果我包含代码，这就是我看到的（这是我想看到的）但是我遇到了上面提到的问题。

Start 类的定义：

<style>
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
</style>

任何帮助将不胜感激

更新

这是我之前看到的向下滚动并自动加载新数据的内容。 （可以观察到，开始处的值与图片顶部所示的值相同。

这是在到达页面底部并执行自动加载之后。可以看出，图片顶部的评分仍然相同（3.11 和 2.89），因此评分的实际值没有变化。相关的所有其他数据也没有改变（例如评级数：7 和 12）但是，它唯一改变的是开始填充到 max=5，这就是我怀疑这个问题的原因在这行代码中

     $(this).html($('<span />').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));

或者只是在 autoload_process.php 文件中有脚本，但我不知道如何解决问题。

Answer 1

看起来您每次运行函数时都选择了所有 <span> 元素，因此您的数学运算将同时针对新添加的项和旧项执行。

您可以使用额外的类名来标识需要更新的跨度。然后根据该类进行选择。

也许这样的事情会起作用：

echo '<span class="stars notReadyYet">'; 
echo $rating;
echo '</span>'; 

.

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('.notReadyYet').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));
        $(this).removeClass('notReadyYet'); //remove this class so it doesn't get processed again!
    });
}