星级评价仅为4星



我正在与Couchcms v2.3创建目录网站,最近我试图实现星级评级系统的页面,但我无法得到5星级评级工作正常。我只能评价1到4颗星,但当我点击5颗星时,什么都没有发生。请帮助我使它正常工作或分享你的代码,正常工作。提前谢谢。

这是我的代码。'
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Rate' order='50000' hidden='1'>    
<cms:editable type='vote_stars' search_type='decimal' name='my_stars' />
</cms:template>
<!DOCTYPE html>
<html>
<head>
<title>Star Rate</title>   
<style>
.rating {
float:left;
}
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
follow these rules. Every browser that supports :checked also supports :not(), so
it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
position:absolute;
top:-9999px;
clip:rect(0,0,0,0);
}
.rating:not(:checked) > label {
float:right;
width:1em;
/* padding:0 .1em; */
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:300%;
/* line-height:1.2; */
color:#ddd;
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input:checked ~ label {
color: dodgerblue;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: dodgerblue;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: dodgerblue;
}
.rating > label:active {
position:relative;
top:2px;
left:2px;
}
</style>
</head>
<body>
<cms:form masterpage=k_template_name mode='edit' page_id=k_page_id anchor='0' method='post'>
<cms:if k_success>
<cms:db_persist_form my_stars=frm_stars />
<cms:redirect k_page_link />
</cms:if>
<div class="rating">
<cms:input type='radio' name="stars" opt_values='5 | 4 | 3 | 2 | 1' />
<input type="submit" name="submit" value="" />
</div>
</cms:form>
<br>
<cms:show_votes 'my_stars'>
<br>
<p>
<cms:dump />
</p>
</cms:show_votes>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('input[type=radio]').hide();
$(document).ready(function() {
// make following action fire when radio button changes
$('input[type=radio]').change(function() {
// find the submit button and click it on the previous action
$('input[type=submit]').click()
});
});
</script>
</html>
<?php COUCH::invoke(); ?>

脚本不触发change事件,因为第5个选项已经呈现为checked="checked"。解决这个问题的一种方法是修改可编辑定义,如下所示

<cms:input type='radio' name="stars" opt_values='5 | 4 | 3 | 2 | 1' opt_selected='-'/>

opt_selected不可能的值参数允许完全不检查字段。

另一种方法是通过使用另一个事件来修复脚本,例如click

$('input[type=radio]').click(function() {

最新更新