完善星级评定系统

Question

我为一个学校项目制作了星级评分系统，需要一些帮助对其进行一些改进。 这是一个非常简单的设置：index.php包含列表项（内容是从数据库中获取的），其中包含一个图像和一个div，其中包含用于评级的星号。 每个星号都是触发一个函数的链接，该函数将评级保存在数据库中。

这是链接 ！ 对于初学者。

如果单击任何星号，则第一次单击将在第一个列表项上显示一个绿色的复选标记。 想法是，此复选标记在评级时将出现在每个列表项上。 那就是我需要你们为我指出正确方向的地方。 首先，我知道我无法回显具有相同id的多个div，但是为了使ajax函数正常工作，我不得不这样做（document.getElementById（“ rated”））。 关于如何解决这个问题的任何想法？

码

insert_receive.php：

<?php
  session_start();
  $sess = session_id();

  $mysqli = new mysqli("", "", "", "");
  if (mysqli_connect_errno()) {
  printf("Connect failed: %s\n", mysqli_connect_error());
   exit();
 }

$stmt = $mysqli->prepare("REPLACE INTO Ratings (projId_fkey, sessionId, rvalue) VALUES ('".$_GET['projId']."','".$sess."','".$_GET['rating']."')");
$stmt->execute();

printf("✔");
?>

ajax_framework.js：

function saveClick(rating,projId)
{

var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rated").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","insert_receive.php?rating=" + rating + "&projId=" + projId,true);
xmlhttp.send("");
}

index.php ：（重要部分）

<?php

$select = "SELECT id, projName, location FROM Projects";

if($result = $mysqli->query($select))
{
    while($row = $result->fetch_assoc())
    {
        echo '<li id="'.$row['id'].'">';
        echo '<h1 class="header">'.$row['projName']."</h1>";
        echo '<img src="'.$row['location'].'" alt=""/>';
        echo '<div class="rating">';
        echo '<a href="#" onclick="saveClick(5, '.$row['id'].')">'.★★★★★."</a>";
        echo '<a href="#" onclick="saveClick(4, '.$row['id'].')">'.★★★★."</a>";
        echo '<a href="#" onclick="saveClick(3, '.$row['id'].')">'.★★★."</a>";
        echo '<a href="#" onclick="saveClick(2, '.$row['id'].')">'.★★."</a>";
        echo '<a href="#" onclick="saveClick(1, '.$row['id'].')">'.★."</a>";
        echo '<div id="rated">'.""."</div>";
        echo "</div>";
        echo "</li>";
    }
}
?>

Answer 1

您可以使用迭代器为每个元素赋予不同的ID，之后，您实际上可以通过正确的ID动态获取元素。 例如：

echo '<div id="rated'.$row['id'].'">

接着：

document.getElementById("rated"+projId).innerHTML=xmlhttp.responseText;

这将动态选择所需的元素。

一般而言，关于您的代码，我只是必须将您指向http://jquery.com/的方向，这将使元素选择更加简单，并且还将规范您对ajax的使用。

Answer 2

将您的PHP更改为：

while($row = $result->fetch_assoc())
{
    echo '<li id="'.$row['id'].'">';
    echo '<h1 class="header">'.$row['projName']."</h1>";
    echo '<img src="'.$row['location'].'" alt=""/>';
    echo '<div class="rating">';
    echo '<a href="#" onclick="saveClick(5, '.$row['id'].')">'.★★★★★."</a>";
    echo '<a href="#" onclick="saveClick(4, '.$row['id'].')">'.★★★★."</a>";
    echo '<a href="#" onclick="saveClick(3, '.$row['id'].')">'.★★★."</a>";
    echo '<a href="#" onclick="saveClick(2, '.$row['id'].')">'.★★."</a>";
    echo '<a href="#" onclick="saveClick(1, '.$row['id'].')">'.★."</a>";
    echo '<div id="rated'.$row['id'].'">'.""."</div>";//updated this line
    echo "</div>";
    echo "</li>";
}

并在您的JavaScript中执行以下操作：

document.getElementById("rated"+projId).innerHTML=xmlhttp.responseText;

Answer 3

使用计数器$id递增li id

<?php

$select = "SELECT id, projName, location FROM Projects";

if($result = $mysqli->query($select))
{
$id = 0;
while($row = $result->fetch_assoc())
{
    echo '<li id="'.$id.'">';
    echo '<h1 class="header">'.$row['projName']."</h1>";
    echo '<img src="'.$row['location'].'" alt=""/>';
    echo '<div class="rating">';
    echo '<a href="#" onclick="saveClick(5, '.$row['id'].')">'.★★★★★."</a>";
    echo '<a href="#" onclick="saveClick(4, '.$row['id'].')">'.★★★★."</a>";
    echo '<a href="#" onclick="saveClick(3, '.$row['id'].')">'.★★★."</a>";
    echo '<a href="#" onclick="saveClick(2, '.$row['id'].')">'.★★."</a>";
    echo '<a href="#" onclick="saveClick(1, '.$row['id'].')">'.★."</a>";
    echo '<div id="rated">'.""."</div>";
    echo "</div>";
    echo "</li>";
    $id++;
}
}
?>

Answer 4

首先，显然要使用类。

echo '<div class="rated">'.""."</div>";

其次，在您的JavaScript中，而不是这一行

document.getElementById("rated").innerHTML=xmlhttp.responseText;

用这个

var proj = document.getElementById(projId);
var rated = proj.getElementsByClassName('rated')[0];
rated.innerHTML=xmlhttp.responseText;

我们在这里所做的是找到一个ID匹配projId的元素。 然后，我们找到类别rated INSIDE的类，这些元素projID我们之前发现的projID 。 现在请注意，不管元素的数量如何， getElementsByClassName返回一个数组，但是由于这里只有一个，所以我们只选择第一个索引[0] 。