【发布时间】：2018-09-30 10:31:28
【问题描述】：
我需要 fa fa-star 类的 mouseenter、mouseout 和 onclick 功能适用于每个特定的“列表”类/li 标记（如列表类 [0、1、2 等]）。我现在拥有的是为每个“列表”类工作。当我在来自不同列表类的星星上鼠标输入时，第一个列表类的星星正在改变。
如果我在第一个列表类/li 标签的星上鼠标输入，则 mouseenter 函数应该适用于该列表类/li 标签，而不适用于其他“列表”类/li 标签。如果是第二个“列表”类，那么它应该适用于该“列表”类/li 标签，而不适用于其他标签。以及第 3 次、第 4 次等。
在 rateclick 功能中，我可以将评级发送到服务器但无法获取它。你也可以看看吗？
代码如下：
index.php 和 style.css
.fa{
font-size:25px;
}
li{
list-style:none;
padding-left:40px;
padding-bottom:40px;
border-bottom:2px solid #ccc;
width:800px;
}
li:last-child{
border-bottom:none;
}
<?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"]; ?>
<?php $customerid = $row["id"]; ?>
<li data-rating=<?php echo "$rating"; ?> data-customerid=<?php echo $customerid; ?> 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;' data-rating='$i' onmouseenter='mouseenterrating($i)' onmouseout='clearstar($rating)' onclick='rateclick($customerid, $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(count){
var j;
var fa = document.getElementsByClassName("fa");
for(j = 0; j < fa.length; j++){
if(j < count){
fa[j].style.color = "orange";
}
else{
fa[j].style.color = "#ccc";
}
}
}
function clearstar(rating){
var fa = document.getElementsByClassName("fa");
var k;
for(k = 0; k < fa.length; k++){
if(k < rating){
fa[k].style.color = "orange";
}
else{
fa[k].style.color = "#ccc";
}
}
}
function rateclick(customerid, count){
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "rating.php?id="+customerid+"&rate="+count);
xhttp.send();
fetch(customerid);
}
function fetch(e){
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "fetch.php");
xhttp.send();
}
</script>
</body>
</html>rating.php
<?php
require "conx.php";
if(isset($_GET['id']) && isset($_GET['rate'])){
$customerid = $_GET['id'];
$rate = $_GET['rate'];
$sql = "UPDATE customers SET rating = '$rate' WHERE id = '$customerid'";
$result = $conx -> query($sql);
}
?>fetch.php
<?php
require "conx.php";
$sql = "SELECT * FROM customers WHERE id = '".customerid."'";
$result = $conx -> query($sql);
$fetch = $result -> fetch_assoc();
?>conx.php
<?php
$conx = mysqli_connect("localhost", "root", "");
if(!$conx){
echo "Not connected with localhost";
}
$sql = "CREATE DATABASE rating";
$query = $conx -> query($sql);
$dbselect = $conx -> select_db("rating");
if(!$dbselect){
echo "No database selected";
}
$sql = "CREATE TABLE customers(id INT(255) NOT NULL AUTO_INCREMENT UNIQUE KEY, username VARCHAR(200) NOT NULL, description VARCHAR(1000) NOT NULL, email VARCHAR(200) NOT NULL PRIMARY KEY, rating INT(5) NOT NULL)";
$query = $conx -> query($sql);
?>【问题讨论】：
-
你试过自己实现吗？也许您可以尝试消除不相关的代码，只专注于您需要帮助的实际功能？
-
而且你应该在发布到 stackoverflow 之前尝试用谷歌搜索你的问题。提示：尝试谷歌搜索
css change color when mouse over -
@HelgeFox，我试过但做不到。你能帮我解决这个问题吗？
-
嗯，你的问题不是很清楚。听起来您需要一个简单的
:hover效果，可以通过 CSS 轻松解决。但是您似乎坚持其他人应该实现您定义的两个功能。我认为在要求以某种方式实施解决方案之前，您至少应该表现出您的努力。 -
@HelgeFox，你可以使用 css。
标签： javascript php css mysqli