【问题标题】:Converting values into star rating using JQuery使用 JQuery 将值转换为星级
【发布时间】:2020-03-03 18:56:41
【问题描述】:

我在循环中有一个值列表。我需要将所有这些值转换为准确的 5 星评级。我已经搜索了很多,但我无法得到我需要的确切答案。

我试过这个:Turn a number into star rating display using jQuery and CSS

但它仅适用于单个值。 考虑我的代码是这样的:

<?php
$a=0;
while($a<5)
{
    echo "<input type=text value=$a><br/>";
    //need to display star rating here
    $a=$a+1.2;
}
?>

这只是一个例子。我想将文本框中的所有值转换为星级。在我的原始代码中,我从 DB 中获取值循环。请帮我这样做。

此代码适用于单个值。

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function() {          

                $('p').html('<span class="stars">'+parseFloat($('input[name=amount]').val())+'</span>');
                $('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>
    <style type="text/css">
        span.stars, span.stars span {
            display: block;
            background: url(image/stars.png) 0 -16px repeat-x;
            width: 80px;
            height: 16px;
        }

        span.stars span {
            background-position: 0 0;
        }
    </style>
</head>
<body>

    <input type="text" name="amount" value="4" />

<p>
   <span class="stars">2.4618164</span></p>

</body>
</html>

但我不知道如何为值循环执行此操作。

【问题讨论】:

  • 为什么要将 $a 增加 1.2?
  • 请显示完整代码(您尝试过的 PHP 和 javascript 代码)
  • @atmd 只是为了查看我在所有方面的评分(仅作为示例)。
  • @Casper 请检查我编辑过的问题
  • 我在jsfiddle 中修复了这个问题。但是,我不确定你想要什么样的循环。请检查 jsfiddle 并举例说明您尝试实现的循环。

标签: javascript jquery css jquery-ui rating


【解决方案1】:

您也可以在不使用 jquery 的情况下执行此操作。你只需要使用

<div class="star-box" style="display: inline-block;width:auto ;white-space: nowrap;">
    <span class="unfilled" style="color:#d3d3d3; position: absolute;top: 0;left: 0;">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <span class="filled" style="color:#e9ce18; white-space: nowrap; overflow: hidden;position: absolute;top: 0;left: 0;width:12.8px">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</div>

这里★是html中白星的十六进制代码,☆是html中黑星的十六进制代码。灰色分配给未填充的星星,黄色分配给填充的星星。我们正在使用绝对定位,以便星星相互重叠。填充类放置在未填充类的顶部。未填充星星的宽度是自动的。显示的填充星取决于您为填充类指定的宽度。

检查http://jsfiddle.net/gyogesh0309/m28b1383/

【讨论】:

    【解决方案2】:

    使用JSFiddle 代码了解基本信息。 你的 PHP 应该是这样的:(假设 $a 包含星号)

    <?php
    $a=0;
    while($a<5)
    {
      echo '<span class="stars">'.$a.'</span>';
      $a=$a+1.2;
    }
    ?>
    

    由于我不确定您想要使用 while 循环做什么,看来您也可以使用 for 循环,这将是一个更好的选择。但这当然取决于您需要循环做什么。

    总计应该是这样的:

    <html>
    <head>
        <style type="text/css">
            span.stars, span.stars span {
                display: block;
                background: url(http://www.ulmanen.fi/stuff/stars.png) 0 -16px repeat-x;
                width: 80px;
                height: 16px;
            }
    
            span.stars span {
                background-position: 0 0;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" />
        <script type="text/javascript">
            $.fn.stars = function() {
                return $(this).each(function() {
                    // Get the value
                    var val = parseFloat($(this).html());
                    // Make sure that the value is in 0 - 5 range, multiply to get width
                    var size = Math.max(0, (Math.min(5, val))) * 16;
                    // Create stars holder
                    var $span = $('<span />').width(size);
                    // Replace the numerical value with stars
                    $(this).html($span);
                });
            }
    
            $( document ).ready(function() {
                $('span.stars').stars();
            });
        </script>
    </head>
    <body>
        <?php
            $a=0;
            while($a<5)
            {
                echo '<span class="stars">'.$a.'</span>';
                $a=$a+1.2;
            }
        ?>
    </body>
    

    【讨论】:

    • 我需要有星级列表...即,首先是 0,然后是 1.2,然后是 2.4,然后是 3.6、4.8,就像我需要评级一样。
    • 对于你描述的分数,这段代码应该可以。
    • 不...当我在循环中执行它时它不会工作..请给我一些建议
    • 已更新,但由于图像已脱机,我无法再对其进行测试
    • 它显示值和空星...不工作... :-( 无论如何感谢您的支持。
    【解决方案3】:

    如果您想将数字转换为星号,则可以使用它。您只需通过数据库数字更改它的宽度

    .containerdiv {
      border: 0;
      float: left;
      position: relative;
      width: 300px;
    }
    
    .cornerimage {
      border: 0;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    
    img {
      max-width: 300px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="containerdiv">
      <div>
        <img src="https://image.ibb.co/jpMUXa/stars_blank.png" alt="img">
      </div>
      <div class="cornerimage" style="width:50%;">
        <img src="https://image.ibb.co/caxgdF/stars_full.png" alt="">
      </div>
      <div>

    js fiddle

    【讨论】:

      【解决方案4】:

      你也可以这样做,这里是示例代码

      var starMap = {
        '0.5': 'half',
        '1': '1',
        '1.5': '1 and a half',
        '2': '2',
        '2.5': '2 and a half',
        '3': '3',
        '3.5': '3 and a half',
        '4': '4',
        '4.5': '4 and a half',
        '5': '5'
      }
      
      function roundToHalf(value) {
        return Math.round(value * 2) / 2;
      }
      
      function convertToString(value) {
        return Number(value).toString();
      }
      
      function setStarRating(value) {
        var fieldValue = starMap[convertToString(roundToHalf(value))];
        $("input[name=rating][value='" + fieldValue + "']").attr('checked', 'checked');
      }
      
      $(document).ready(function() {
        var value = 4.4;
        setStarRating(value);
      });
      .rating_widgets {
        display: flex;
        margin-top: 25px;
      }
      
      .rating {
        border: none;
        float: left;
      }
      
      .rating>input {
        display: none;
      }
      
      .rating>label:before {
        margin: 5px;
        font-size: 24px;
        font-family: FontAwesome;
        display: inline-block;
        content: "\f005";
      }
      
      .rating>.half:before {
        content: "\f089";
        position: absolute;
      }
      
      .rating>label {
        color: #ddd;
        float: right;
      }
      
      .rating>input:checked~label,
      .rating:not(:checked),
      .rating:not(:checked) {
        color: #FFD700;
      }
      
      .rating>input:checked,
      .rating>input:checked,
      .rating>input:checked~label,
      .rating>input:checked~label {
        color: #FFED85;
      }
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://use.fontawesome.com/a2e210f715.js"></script>
      <div class="rating_widgets">
        <fieldset class="rating">
          <input type="radio" id="star5" name="rating" />
          <label class="full" for="star5" title="Awesome - 5 stars"></label>
          <input type="radio" id="star4half" name="rating" value="4 and a half" />
          <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
          <input type="radio" id="star4" name="rating" value="4" />
          <label class="full" for="star4" title="Pretty good - 4 stars"></label>
          <input type="radio" id="star3half" name="rating" value="3 and a half" />
          <label class="half" for="star3half" title="Good - 3.5 stars"></label>
          <input type="radio" id="star3" name="rating" value="3" />
          <label class="full" for="star3" title="Good - 3 stars"></label>
          <input type="radio" id="star2half" name="rating" value="2 and a half" />
          <label class="half" for="star2half" title="ok - 2.5 stars"></label>
          <input type="radio" id="star2" name="rating" value="2" />
          <label class="full" for="star2" title="ok - 2 stars"></label>
          <input type="radio" id="star1half" name="rating" value="1 and a half" />
          <label class="half" for="star1half" title="Bad - 1.5 stars"></label>
          <input type="radio" id="star1" name="rating" value="1" />
          <label class="full" for="star1" title="Very bad - 1 star"></label>
          <input type="radio" id="starhalf" name="rating" value="half" />
          <label class="half" for="starhalf" title="Very bad - 0.5 stars"></label>
        </fieldset>
      </div>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-03-31
        • 2021-02-22
        • 2022-09-25
        • 2014-04-09
        • 1970-01-01
        相关资源
        最近更新 更多