如何在鼠标进入和鼠标移出时更改星级颜色

时间:2018-09-25 17:01:42

标签: javascript php mysqli

当我从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>

0 个答案:

没有答案