0

我为一个学校项目制作了一个星级评分系统，需要一些帮助来改进它。这是一个相当简单的设置：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>";
    }
}
?>
4

4 回答 4

0

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

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

进而：

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

这将动态选择您想要的元素。

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

于 2012-10-30T21:32:25.790 回答
0

将您的 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;
于 2012-10-30T21:38:46.787 回答
0

使用计数器$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++;
}
}
?>
于 2012-10-30T21:41:01.770 回答
-1

首先，显然使用一个类。

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]。

于 2012-10-30T21:32:21.453 回答