- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的最终目标是为我的 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)覆盖它,并且仍然保留能够将这些输入发送到我的数据库的功能。
有简单的方法吗?或者说这是一件困难的事情?
最佳答案
本质上,您要做的所有事情都可以分为以下步骤:
display: none;
.首先要注意的是,您必须为每颗星星设置评级值和目标 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 样式表中:
.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;
}
我用过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/
我正在处理一组标记为 160 个组的 173k 点。我想通过合并最接近的(到 9 或 10 个组)来减少组/集群的数量。我搜索过 sklearn 或类似的库,但没有成功。 我猜它只是通过 knn 聚类
我有一个扁平数字列表,这些数字逻辑上以 3 为一组,其中每个三元组是 (number, __ignored, flag[0 or 1]),例如: [7,56,1, 8,0,0, 2,0,0, 6,1,
我正在使用 pipenv 来管理我的包。我想编写一个 python 脚本来调用另一个使用不同虚拟环境(VE)的 python 脚本。 如何运行使用 VE1 的 python 脚本 1 并调用另一个 p
假设我有一个文件 script.py 位于 path = "foo/bar/script.py"。我正在寻找一种在 Python 中通过函数 execute_script() 从我的主要 Python
这听起来像是谜语或笑话,但实际上我还没有找到这个问题的答案。 问题到底是什么? 我想运行 2 个脚本。在第一个脚本中,我调用另一个脚本,但我希望它们继续并行,而不是在两个单独的线程中。主要是我不希望第
我有一个带有 python 2.5.5 的软件。我想发送一个命令,该命令将在 python 2.7.5 中启动一个脚本,然后继续执行该脚本。 我试过用 #!python2.7.5 和http://re
我在 python 命令行(使用 python 2.7)中,并尝试运行 Python 脚本。我的操作系统是 Windows 7。我已将我的目录设置为包含我所有脚本的文件夹,使用: os.chdir("
剧透:部分解决(见最后)。 以下是使用 Python 嵌入的代码示例: #include int main(int argc, char** argv) { Py_SetPythonHome
假设我有以下列表,对应于及时的股票价格: prices = [1, 3, 7, 10, 9, 8, 5, 3, 6, 8, 12, 9, 6, 10, 13, 8, 4, 11] 我想确定以下总体上最
所以我试图在选择某个单选按钮时更改此框架的背景。 我的框架位于一个类中,并且单选按钮的功能位于该类之外。 (这样我就可以在所有其他框架上调用它们。) 问题是每当我选择单选按钮时都会出现以下错误: co
我正在尝试将字符串与 python 中的正则表达式进行比较,如下所示, #!/usr/bin/env python3 import re str1 = "Expecting property name
考虑以下原型(prototype) Boost.Python 模块,该模块从单独的 C++ 头文件中引入类“D”。 /* file: a/b.cpp */ BOOST_PYTHON_MODULE(c)
如何编写一个程序来“识别函数调用的行号?” python 检查模块提供了定位行号的选项,但是, def di(): return inspect.currentframe().f_back.f_l
我已经使用 macports 安装了 Python 2.7,并且由于我的 $PATH 变量,这就是我输入 $ python 时得到的变量。然而,virtualenv 默认使用 Python 2.6,除
我只想问如何加快 python 上的 re.search 速度。 我有一个很长的字符串行,长度为 176861(即带有一些符号的字母数字字符),我使用此函数测试了该行以进行研究: def getExe
list1= [u'%app%%General%%Council%', u'%people%', u'%people%%Regional%%Council%%Mandate%', u'%ppp%%Ge
这个问题在这里已经有了答案: Is it Pythonic to use list comprehensions for just side effects? (7 个答案) 关闭 4 个月前。 告
我想用 Python 将两个列表组合成一个列表,方法如下: a = [1,1,1,2,2,2,3,3,3,3] b= ["Sun", "is", "bright", "June","and" ,"Ju
我正在运行带有最新 Boost 发行版 (1.55.0) 的 Mac OS X 10.8.4 (Darwin 12.4.0)。我正在按照说明 here构建包含在我的发行版中的教程 Boost-Pyth
学习 Python,我正在尝试制作一个没有任何第 3 方库的网络抓取工具,这样过程对我来说并没有简化,而且我知道我在做什么。我浏览了一些在线资源,但所有这些都让我对某些事情感到困惑。 html 看起来
我是一名优秀的程序员,十分优秀!