python - 设计 .IntegerField() 使其成为星级系统？

Question

我的最终目标是为我的 Django 网站获得 5 星级评级系统。我正在使用链接到我的模型的表单来处理它。

这是我审查的模型:

class review(models.Model):
ONE_TO_FIVE_RATING_CHOICES = (
    (1, '1'),
    (2, '2'),
    (3, '3'),
    (4, '4'),
    (5, '5'),
)
BOOK_RATING_CHOICES = (
    (1, '$'),
    (2, '$$'),
    (3, '$$$'),
    (4, '$$$$'),

)
ATTENDANCE_RATING_CHOICES = (
    (1, 'Not Required'),
    (2, 'Required'),


)
user = models.ForeignKey(settings.AUTH_USER_MODEL, default=0)
course = models.ForeignKey(listing)
slug = models.SlugField(unique=True, default=None)
pub_date = models.DateTimeField('date published')
user_name = models.CharField(max_length=100)
title = models.CharField(max_length=140)
review_content = models.TextField()
difficulty_rating = models.IntegerField(choices=ONE_TO_FIVE_RATING_CHOICES)
workload_rating = models.IntegerField(choices=ONE_TO_FIVE_RATING_CHOICES)
book_rating = models.IntegerField(choices=BOOK_RATING_CHOICES)
attendance_rating = models.IntegerField(choices=ATTENDANCE_RATING_CHOICES)

这是表格:

class ReviewForm(forms.ModelForm):

class Meta:
    model = review
    fields = [

    'difficulty_rating',
    'workload_rating',
    'book_rating',
    'attendance_rating',
    'title',
    'review_content',



    ]

我的问题是，如何使用 CSS 对其进行样式设置？我想将其转换为 radio 输入，然后用星形图标(来自 FontAwesome)覆盖它，并且仍然保留能够将这些输入发送到我的数据库的功能。

有简单的方法吗？或者说这是一件困难的事情？

Answer 1

本质上，您要做的所有事情都可以分为以下步骤:

1. 通过设置 CSS 属性隐藏单选字段 display: none; .
2. 用星星代替 radio 场。
3. 为每颗星设置一个评分值。例如。第一个星星的评分值应为 1，第二个星星的评分值应为 2，依此类推。
4. 将目标值设置为相应单选字段的名称。
5. 当用户点击星星时，获取其评级值并使用 JavaScript 检查相应的目标单选字段。

<小时/>

SEE DEMO .

HTML:

首先要注意的是，您必须为每颗星星设置评级值和目标 radio 输入。这样，如果点击一颗星星，您就可以获取它的评级值并检查目标 radio 输入。

所以，明星应该是这样的:

<i class="rating-star" data-rating="1" data-target="difficulty_rating"></i>

如果您为 workload_rating 创建一颗星，你必须将其更改为 data-target值:

<i class="rating-star" data-rating="1" data-target="workload_rating"></i>

您可以对其他评级字段重复此操作。

星星的示例代码(将以下代码复制并粘贴到要显示星星的位置):

<!-- Stars for difficulty_rating -->
<div class="rating">
    <!-- The stars must be in reverse order of rating value -->
    <i class="rating-star" data-rating="5" data-target="difficulty_rating"></i>
    <i class="rating-star" data-rating="4" data-target="difficulty_rating"></i>
    <i class="rating-star" data-rating="3" data-target="difficulty_rating"></i>
    <i class="rating-star" data-rating="2" data-target="difficulty_rating"></i>
    <i class="rating-star" data-rating="1" data-target="difficulty_rating"></i>
</div>

<!-- Stars for workload_rating -->
<div class="rating">
    <!-- The stars must be in reverse order of rating value -->
    <i class="rating-star" data-rating="5" data-target="workload_rating"></i>
    <i class="rating-star" data-rating="4" data-target="workload_rating"></i>
    <i class="rating-star" data-rating="3" data-target="workload_rating"></i>
    <i class="rating-star" data-rating="2" data-target="workload_rating"></i>
    <i class="rating-star" data-rating="1" data-target="workload_rating"></i>
</div>

CSS:

将其添加到您的 CSS 样式表中:

.rating {
  overflow: hidden;
  display: table;
  font-size: 20px;
  color: #FFCA00;
  font-style: normal;
}

.rating-star {
  padding: 0 5px;
  margin: 0;
  cursor: pointer;
  display: block;
  float: right;
}

.rating-star:after {
  position: relative;
  font-family: FontAwesome;
  content: '\f006';
}

.rating-star.checked ~ .rating-star:after,
.rating-star.checked:after {
  content: '\f005';
}

.rating:hover .rating-star:after {
  content: '\f006';
}

.rating-star:hover ~ .rating-star:after,
.rating-star:hover:after {
  content: '\f005' !important;
}

JavaScript:

我用过jQuery使 JavaScript 部分更容易。

在 </body> 之前插入以下代码标签以您的模板结尾:

<!-- Include jquery -->
<!-- this requires an internet connection. but you can download jquery and put it in your static folder and link it from there -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- JS code for updating rating values -->
<script>
    $('.rating-star').on('click', function() {
        $(this).parents('.rating').find('.rating-star').removeClass('checked'); // uncheck previously checked star

        $(this).addClass('checked'); // check currently selected star

        var ratingValue = $(this).attr('data-rating'); // get rating value
        var ratingTarget = $(this).attr('data-target');

        // set the rating value to corresponding target radio input
        $('input[name="' + ratingTarget + '"][value="' + ratingValue + '"]').prop('checked', true);
    });
</script>