【问题标题】:how to fill the star rating according to the votes如何根据票数填写星级
【发布时间】:2015-10-27 12:00:33
【问题描述】:

我如何填充星级评分的星星已经运行计算的所有内容并且在变量计算中需要一个回声才能看到结果他会返回我并且他是我返回正确但是我无法让它填充例子要注意3.3的产品和填充它的三颗星和30%的第四个像我一样吗?我必须在哪里播放我的变量才能在星星中显示它? 代码:

<form id="rating" action"rating.php" method="post">

       <input type="hidden" name="id" id="idd" value="$idprod" />
        <div class="vote">
         <label>
          <input id="stars" class="radioo" type="radio" name="fb" value="1" />
          <i class="fa" id="fa"></i>
         </label>
         <label>
          <input id="stars" class="radioo" type="radio" name="fb" value="2" />
          <i class="fa" id="fa"></i>
         </label>
         <label>
          <input id="stars" class="radioo" type="radio" name="fb" value="3" />
          <i class="fa" id="fa"></i>
         </label>
         <label>
          <input id="stars" class="radioo" type="radio" name="fb" value="4" />
          <i class="fa" id="fa"></i>
         </label>
         <label>
          <input id="stars" class="radioo" type="radio" name="fb" value="5" />
          <i class="fa" id="fa"></i>
         </label>
       </div>
  </form>

jquery:

$('.vote label i.fa').on('click mouseover',function(){
    // remove classe ativa de todas as estrelas
    $('.vote label i.fa').removeClass('active');
    // pegar o valor do input da estrela clicada
    var val = $(this).prev('input').val();
    //percorrer todas as estrelas
    $('.vote label i.fa').each(function(){
        /* checar de o valor clicado é menor ou igual do input atual
        *  se sim, adicionar classe active
        */
        var $input = $(this).prev('input');
        if($input.val() <= val){
            $(this).addClass('active');
        }
    });
    $("#voto").html(val); // somente para teste
});
//Ao sair da div vote
$('.vote').mouseleave(function(){
    //pegar o valor clicado
    var val = $(this).find('input:checked').val();
    //se nenhum foi clicado remover classe de todos
    if(val == undefined ){
        $('.vote label i.fa').removeClass('active');
    } else { 
        //percorrer todas as estrelas
        $('.vote label i.fa').each(function(){
            /* Testar o input atual do laço com o valor clicado
            *  se maior, remover classe, senão adicionar classe
            */
            var $input = $(this).prev('input');
            if($input.val() > val){
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        });
    }
    $("#voto").html(val); // somente para teste
});

php:

$id = $_GET['cod'];
$sql = mysql_query("SELECT * FROM produtos WHERE id_produto = $id");
$test = mysql_query("SELECT votos, pontos FROM produtos WHERE id_produto = $id");
$aux = mysql_fetch_array($sql);
$idprod = $aux['id_produto'];
$row = mysql_fetch_array($test);
$voto = $row['votos'];
$ponto = $row['pontos'];
$calc = round(($ponto/$voto),1);

【问题讨论】:

  • 小心你的 MySQL 查询,因为它们允许 SQL 注入。您需要转义 $id 或使用占位符。
  • 替换了我的答案,希望能更好地适用于您的问题。

标签: javascript php jquery


【解决方案1】:

如果我正确理解了您的问题,您不知道如何从 PHP 值动态填充星以计算评分。

我把这个解决方案放在一起,小提琴是here。执行此操作的最佳方法(在 AJAX 之外)是将计算的评分传递到 rating 元素的数据属性中。然后让你的 JS 根据 jQuery 所示填充星星。我还展示了如何使用单击事件填充隐藏的输入字段并重新评估星形填充以表示单击的内容。

如果稍后未提交表单,您可以通过 ajax 发布新评级(最好的解决方案是避免页面更改只是添加新评级)。或者,如果提交了表单,只需确保 div 在元素内。

代码如下:

PHP:

//Do your calcuations
$calc = round(($ponto/$voto),1);

HTML

<div class="rating" data-calc="<?php echo $calc; ?>">
    <div class="star" data-seq="1">
        <div class="cnt">
            <img class="full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" />
        </div>
        <img class="empty" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/1088px-Five-pointed_star.svg.png" />

    </div>
    <div class="star" data-seq="2" >
        <div class="cnt">
            <img class="full2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" />
        </div>
        <img class="empty" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/1088px-Five-pointed_star.svg.png" />
    </div>
    <div class="star" data-seq="3">
        <div class="cnt">
            <img class="full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" />
        </div>
        <img class="empty" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/1088px-Five-pointed_star.svg.png" />
    </div>
    <div class="star" data-seq="4">
        <div class="cnt">
            <img class="full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" />
        </div>
        <img class="empty" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/1088px-Five-pointed_star.svg.png" />
    </div>
    <div class="star" data-seq="5">
        <div class="cnt">
            <img class="full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Stj%C3%A4rna.svg/2000px-Stj%C3%A4rna.svg.png" />
        </div>
        <img class="empty" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/1088px-Five-pointed_star.svg.png" />
    </div>
    <input type="hidden" name="rating" value="" />
</div>

jQuery

function fillStarOnPercent(star, percent)
{   var fill = 25 *  percent;
    star.children('.cnt').css({'width' : fill +'px'});
}

function fillStars(parent, fullStars, percent){
    for(var i = 1; i < 6; i++)
    {
        var star = parent.find('.star[data-seq="'+i+'"]');
        if(i < fullStars)
            fillStarOnPercent(star, 1);

        if(i == fullStars)
            fillStarOnPercent(star, percent);

        if(i > fullStars)
            fillStarOnPercent(star, 0);
    }
}

$(document).ready(function() {

    jQuery('.rating').each(function() {

        var calc   = jQuery(this).data('calc');
        var fullStars = Math.floor(calc);
        if(fullStars == calc)
            var percent = 1
        else
            var percent = calc - fullStars;

        fillStars( jQuery(this), fullStars, percent );

    });

    jQuery('.rating').on('click', '.star', function() {
       var rating = jQuery(this).data('seq');
        fillStars(jQuery(this).parent(), rating, 1 );

       jQuery(this).parent().children('input[name="rating"]').val(rating);
    });
});

CSS

.star {width:25px;height:25px; position:relative; float:left;}
.star img {display:block; position:absolute; top:0; left:0; width:25px; height:25px;}
.cnt {position:absolute; top:0; left:0; overflow:hidden; width:25px; height:25px}

【讨论】:

  • 不必展示带有我的样式单选按钮输入和星形图标的示例吗?
  • type 找到了一种更简单的方法,所以我知道不要这样做 我的朋友给我的想法是我没有在此图标的底部放置进度条,然后此条采用变量 calc 的值并制作一个覆盖星星的百分比不起作用如果类型有三颗星和 30%,我该如何在我的系统上实现它你知道吗?
  • 我分享了我将如何解决这个问题。您的图标和输入不是我要解决的问题。虽然我确定如果您查看我的示例并了解我做了什么,您可以将其应用于您的具体案例。
  • 有一个不完整星星的错误。要修复它,请将条件更改为 ` if(fullStars == calc) { var percent = 1; } else { var percent = calc - fullStars;全明星++; } `
猜你喜欢
  • 2020-09-04
  • 1970-01-01
  • 2020-09-01
  • 2023-03-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多