Question

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

这是the link！首发。

如果您点击任何一颗星，第一次点击将在第一个列表项上产生绿色复选标记。这个想法是这个复选标记在评级时会出现在每个列表项上。这就是我需要你们指出正确方向的地方。首先我知道我不能回显多个具有相同id的div，但我必须为了使ajax函数起作用（document.getElementById（“rated”））。关于如何解决这个问题的任何想法？

CODE

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类的元素。现在注意getElementsByClassName返回一个数组而不管元素的数量，但由于我们这里只有一个数组，我们只需在第一个索引[0]选择项目。

改善星级评定系统

4 个答案: