Question

我需要fa-star类的mouseenter，mouseout和onclick函数适用于每个特定的“列表”类/ li标记（例如列表类[0、1、2等]）。我现在为每个“列表”课程工作。当我从其他列表类中鼠标输入一颗星星时，第一个列表类的星星正在发生变化。

如果我将鼠标悬停在第一个列表类/ li标签上的星星上，则mouseenter函数应该适用于该列表类/ li标签，而不适用于其他“列表”类/ li标签。如果是第二个“列表”类，那么它应该适用于该“列表”类/ li标记，而不适合其他人。以及第三，第四等等。

在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);

?>

Answer 1

以您的初次尝试为基础，我为您提供了以下解决方案：

function onMouseEnter(index){
   var fa = document.getElementsByClassName("fa");
   var j;
   for(j = 0; j < fa.length; j++){
       if(j < index){
           fa[j].style.color = "orange";
       }
       else{
           fa[j].style.color = "#ccc";
       }
   }
}
function onMouseOut(){
    var fa = document.getElementsByClassName("fa");
    var k;
    for(k = 0; k < fa.length; k++){
        fa[k].style.color = "#ccc";
    }
}

Demo

如何在鼠标输入，鼠标移开和onclick

1 个答案: