jQuery代码在第二页中不起作用

Question

我有以下脚本来显示课程的评分。但它正好适用于显示5颗星的分页第一页，当它显示第二页时显示10颗星。代码如下，

<div class="ft-item">
    <div class="rating_<?php echo $row->courseId;?>">
</div>
<script>
    $('.rating_<?php echo $row->courseId;?>').raty({
        starOff : '<?php echo base_url()?>public/images/star/icon-star-2.png',
        starOn  : '<?php echo base_url()?>public/images/star/icon-star-1.png',
        starHalf: '<?php echo base_url()?>public/images/star/icon-star-3.png',
        readOnly : true,
        half  : true,
        score : <?php echo $r;?>,
        space : true
     });  
</script>    

首页课程图片

在本课程中，五颗星正在显示并位于第一页。

第二页课程图像

在本课程中，有10颗星显示并位于第二页。

以上脚本是否在第二页中没有绑定？

Answer 1

当你通过ajax调用分页时，你需要在success函数中的ajax响应之后调用你的脚本。但问题是你的分数需要特定于每本书/项目，你需要更改

score : <?php echo $r;?> 

和

$('.rating_<?php echo $row->courseId;?>')

并通过score而不是javascript获取php，并将该功能移至ajax成功。现在要从javascript获取数据并删除php，您需要使用data属性为此目的添加评级，如data-rating=<?=r?>，通过php填充html，然后使用.each并迭代所有元素并通过data-rating在javacript中获取相应的$(element).data('rating')属性并分配给费率选项。您可以看到下面的示例如何根据您需要复制此JavaScript的数据属性来填充评级，并相应地更新您的HTML，并且您已完成。

$('.rating').each(function() {
  var ele = $(this);
  $(ele).raty({
    starOff: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-off.png',
    starOn: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-on.png',
    starHalf: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-half.png',
    readOnly: true,
    half: true,
    score: ele.data('rating'),
    space: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.js"></script>

<div class="ft-item">
  <div class="rating" data-rating="3"></div>
</div>

<div class="ft-item">
  <div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
  <div class="rating" data-rating="2"></div>
</div>
<div class="ft-item">
  <div class="rating" data-rating="1"></div>
</div>
<div class="ft-item">
  <div class="rating" data-rating="5"></div>
</div>
<div class="ft-item">
  <div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
  <div class="rating" data-rating="4"></div>
</div>