- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为我的网站建立一个评级系统。它目前运行良好,但我想改进系统的美学方面。我希望能够从数据库中获取评级并将其显示为 5 星评级。另外,如果不是太复杂,我希望能够点击星星将评分记录在数据库中,而不是写一个数字。
我对网络开发很陌生。特别是,我没有使用 javascript 的经验(我只做过在互联网上找到的教程),我认为这是实现我正在搜索的功能所必需的,所以请给我一个小例子和你的回复,以便我能够了解。
要将评级呈现为星级,我不知道该怎么做。为了将评分记录为星级,我想到了两种解决方案:
1) 使用 django star-ratings但我认为我没有理解它是如何工作的能力。我已经发了一篇帖子来寻求有关此应用程序的帮助和示例,但我没有收到任何帮助,所以我想我应该忘记这一点。
2) 使用带有一些适当小部件的表单将 IntegerInput 呈现为 5 星评级。
对于第二个解决方案,我已经有了代码,我现在需要一个小部件来替换 'Stars'
在下面的代码中,但我不知道该怎么做。有人能帮我吗 ?
模型.py
class Avis(models.Model):
note = models.IntegerField()
class AvisForm(forms.ModelForm):
class Meta:
model = Avis
fields = ['note']
widgets = {'note': forms.NumberInput(attrs={'class': 'Stars'})}
labels = {'note': 'Note /5'}
<form method="post" action="">
{% csrf_token %}
{% for field in form %}
<div class="fieldWrapper form-group">
{{ field.label_tag }}
{{ field }}
</div>
{% endfor %}
<input type="submit" class="btn btn-lg btn-outline-primary btn-block btn-login text-uppercase font-
weight-bold mb-2" value="Envoyer mon avis" />
</form>
{{ avis.note }}
def avis(request, id): # view for displaying and storing the form
commande = get_object_or_404(Commande, id=id)
if request.method == "POST":
form = AvisForm(request.POST)
if form.is_valid():
avis = form.save(commit = False)
avis.commande = commande
avis.save()
commande.has_avis = True
commande.save()
if commande.plat.chef.nb_avis==0:
commande.plat.chef.rating = avis.note
else:
commande.plat.chef.rating = (commande.plat.chef.rating*commande.plat.chef.nb_avis + avis.note)/(commande.plat.chef.nb_avis + 1)
commande.plat.chef.nb_avis += 1
commande.plat.chef.save()
messages.success(request, 'Votre avis a été correctement envoyé !')
return redirect(mes_commandes)
else:
form = AvisForm()
return render(request, 'actualites/avis.html', locals())
def avis2(request, id): # view for recording the rating
avis = get_object_or_404(Avis, id=id)
rating = request.POST.get('rating')
avis.note = rating
avis.save()
messages.success(request, 'Votre avis a été correctement envoyé !')
return redirect(mes_commandes)
<form method="post" action="">
{% csrf_token %}
{% for field in form %}
<div class="fieldWrapper form-group">
{{ field.label_tag }}
{{ field }}
</div>
{% endfor %}
<input type="submit" class="btn btn-lg btn-outline-primary btn-block btn-login text-uppercase font-weight-bold mb-2" value="Envoyer mon avis" />
</form>
<div class="rating rating2">
<a href="#5" title="Give 5 stars" data-value="5">★</a>
<a href="#4" title="Give 4 stars" data-value="4">★</a>
<a href="#3" title="Give 3 stars" data-value="3">★</a>
<a href="#2" title="Give 2 stars" data-value="2">★</a>
<a href="#1" title="Give 1 star" data-value="1">★</a>
</div>
<script>
$(".rating a").on('click', function(e){
let value = $(this).data('value');
$.ajax({
url: "{% url 'avis2' %}",
type: 'POST',
data: {'rating': value},
success: function (d){
// some processing
}
})
});
</script>
class AvisForm(forms.ModelForm):
class Meta:
model = Avis
fields = ['commentaire']
widgets = {'commentaire': forms.Textarea(attrs={'class': 'form-control'})}
最佳答案
我会尽量回答你的两个问题。为了获得评级,您可以渲染星星并为其添加 JS 单击事件。
代码(HTML、CSS)来源:https://codepen.io/GeoffreyCrofte/pen/jEkBL
$(".rating a").on('click', function(e){
let value = $(this).data('value');
$.ajax({
url: "some_url",
type: 'POST',
data: {'rating': value},
success: function (d){
// some processing
}
})
});
.rating {
width: 300px;
margin: 0 auto 1em;
font-size: 45px;
overflow:hidden;
}
.rating input {
float: right;
opacity: 0;
position: absolute;
}
.rating a,
.rating label {
float:right;
color: #aaa;
text-decoration: none;
-webkit-transition: color .4s;
-moz-transition: color .4s;
-o-transition: color .4s;
transition: color .4s;
}
.rating label:hover ~ label,
.rating input:focus ~ label,
.rating label:hover,
.rating a:hover,
.rating a:hover ~ a,
.rating a:focus,
.rating a:focus ~ a {
color: orange;
cursor: pointer;
}
.rating2 {
direction: rtl;
}
.rating2 a {
float:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rating rating2">
<a href="#5" title="Give 5 stars" data-value="5">★</a>
<a href="#4" title="Give 4 stars" data-value="4">★</a>
<a href="#3" title="Give 3 stars" data-value="3">★</a>
<a href="#2" title="Give 2 stars" data-value="2">★</a>
<a href="#1" title="Give 1 star" data-value="1">★</a>
</div>
sum of rating / total rating
.star-ratings-css {
unicode-bidi: bidi-override;
color: #c5c5c5;
font-size: 25px;
height: 25px;
width: 100px;
margin: 0 auto;
position: relative;
padding: 0;
text-shadow: 0px 1px 0 #a2a2a2;
}
.star-ratings-css-top {
color: #e7711b;
padding: 0;
position: absolute;
z-index: 1;
display: block;
top: 0;
left: 0;
overflow: hidden;
}
.star-ratings-css-bottom {
padding: 0;
display: block;
z-index: 0;
}
.star-ratings-sprite {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
font-size: 0;
height: 21px;
line-height: 0;
overflow: hidden;
text-indent: -999em;
width: 110px;
margin: 0 auto;
}
.star-ratings-sprite-rating {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png") repeat-x;
background-position: 0 100%;
float: left;
height: 21px;
display: block;
}
<div class="star-ratings-css">
<div class="star-ratings-css-top" style="width: 74.8%">
<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
</div>
<div class="star-ratings-css-top" style="width: {{ width }}%">
.我试过这些代码片段,对我有用,也应该对你有用:)
关于Django 将数字渲染为 5 星评级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59593884/
我对 Python-Django 和 web 开发还很陌生,我被困在这个使用 POST 创建新资源的特殊问题上。 我正在为 REST API 使用 Django REST 框架,我正在尝试创建一个新资
我已经使用 Django-storages 成功地将 Word 文档存储到 S3。 class Document(TitleSlugDescriptionModel, TimeStampedModel
我有 2 个关于模型代理的问题, 如何从模型对象创建代理对象? 如何从模型查询集创建代理查询集? 例如,假设我们定义了: from django.contrib.auth.models import
我想编写一个直接执行 HTTP 请求的单元测试(而不是使用 django.test.client.Client)。 如果您好奇为什么 - 那是因为我想测试我从 Django 应用程序公开的 Thrif
我为我的个人网站启动了一个 django 项目来学习 django。到目前为止,我已经将我的开发环境设置为我需要的一切,并遵循 this很棒的教程来创建一些基本的数据结构和模板。现在我想开始使用我之前
我已经阅读了很多关于如何在使用 Django 注册时添加额外字段的信息,例如 here 、 here 和 here 。代码片段是: forms.py(来自注册应用程序) class Registrat
我正在编写小型社交应用程序。功能之一是在网站标题中写入用户名。因此,例如,如果我登录并且我的名字是Oleg(用户名),那么我应该看到: Hello, Oleg | Click to edit prof
我有一个使用 Django 和 Django Rest 框架开发的应用程序。我想将 django-reversion 功能添加到我的应用程序中。 我已经尝试过http://django-reversi
我有一个简单的 HTML 表单,我没有使用 Django 表单,但现在我想添加一个选择。 选择最容易创建为 Django ChoiceField (与通过循环等手动创建选择相反),但是,如果没有在 D
我不明白为什么人们以两种方式编写外键,这样做的目的是什么?它们是相同还是不同? 我注意到有些人这样写: author = models.ForeignKey(Author, on_delete=mod
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
这对于 Django 1.2 仍然有效吗? Custom Filter in Django Admin on Django 1.3 or below 我已经尝试过,但管理类中的 list_filter
问题在于,当 django-compressor 编译为 .js 文件的 CoffeeScript 文件中引用 {{ STATIC_URL }} 时,它无法正确加载。 在我的 django 模板中,我
我正在尝试将一些字段从一个 django 模型移动到一个新模型。假设我有一个书籍模型: class Book(models.Model): title = models.CharField(max
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
目前我正在寻找在 Django 中实现访问控制。我已经阅读了有关内置权限的内容,但它并不关心每个对象的基础。例如,我想要“只有创建者可以删除自己的项目”之类的权限。所以我读到了 django-guar
嗨,我正在将我的 Django 模型的一个字段的值设置为其他模型的另一个字段的值。这个值应该是动态变化的。 这是我的第一个模型 class MainModel(AbstractBaseUser, Pe
我正在尝试为我的模型创建一个编辑表单。我没有使用模型表单,因为根据模型类型,用户可以使用不同的表单。 (例如,其中一个表单有 Tinymce 小部件,而另一个没有。) 有没有什么方法可以使用模型设置表
Django 模板中的搜索字段 如何在类似于此图像的 Django 模板中创建搜索字段 http://asciicasts.com/system/photos/1204/original/E354I0
根据 Django documentation ,如果 Django 安装激活了 AuthenticationMiddleware,HttpRequest 对象有一个“user”属性代表当前登录的用户
我是一名优秀的程序员,十分优秀!