当我从li标签/列表类中的星星上输入鼠标时,应该显示橙色星星。表示如果我将鼠标输入1星,则应该显示1个橙色星,否则将显示1个#ccc颜色星。如果为2,则2个橙色星星,否则将显示2个#ccc颜色星星。
onmouseout等级应将等级显示为服务器额定值。如果需要,可以在mouseenterrating函数和currentstar函数中编写任何内容(我的意思是评级系统应如何在mouseenter上工作,而在mouseout上,则需要以这种方式编写代码。)。而且我还需要带有ajax的javascript代码来实现onclick(而不是jQuery)来进行评级。
代码如下:
<?php
require "conx.php";
$sql = "SELECT * FROM customers ORDER BY id ASC";
$query = $conx -> query($sql);
$numrows = $query -> num_rows;
?>
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>
<body>
<div class="Insert-Into">
<ul>
<?php if($numrows > 0): ?>
<?php while($row = $query -> fetch_assoc()): ?>
<?php $rating = $row["rating"]; ?>
<li data-rating=<?php echo "$rating"; ?> data-id=<?php echo $row['id']; ?> class="list">
<br/>
<br/>
<span class="username"><?php echo $row["username"]; ?></span>
<br/>
<br/>
<?php
$i;
$color;
for($i = 1; $i <= 5; $i++){
if($i <= $rating){
$color = "color:orange";
}
else{
$color = "color:#ccc";
}
echo "<i class='fa fa-star' style='$color;' onmouseenter='mouseenterrating($i)' data-rating='$i' onmouseout='currentstar($i)'></i>";
}
?>
<br/>
<br/>
<b>Description</b>
<br/>
<br/>
<div class="desc"><?php echo $row["description"]; ?></div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div>
<script>
function mouseenterrating(rating){
}
function currentstar(rating){
}
</script>
</body>
</html>