gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 02:39:45 26 4
gpt4 key购买 nike

我的最终目标是为我的 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)覆盖它,并且仍然保留能够将这些输入发送到我的数据库的功能。

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

最佳答案

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

  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>

关于python - 设计 .IntegerField() 使其成为星级系统?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45845427/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com