0

学校のプロジェクト用に星評価システムを作成しましたが、それを少し改善するための助けが必要です。これはかなり単純な設定です。index.php には、画像と評価用の星を保持する div を含むリスト項目 (コンテンツは DB からフェッチされます) が含まれています。各星は、評価をデータベースに保存する機能をトリガーするリンクです。

リンクはこちら！初心者向け。

星をクリックすると、最初のクリックで最初のリスト項目に緑色のチェック マークが表示されます。アイデアは、このチェック マークが評価されたときに各リスト項目に表示されるということです。それが、皆さんが私を正しい方向に向ける必要があるところです。まず第一に、同じ 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

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 に答える
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 に答える
-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。ただし、ここでは要素が 1 つしかないため、最初の index でアイテムを選択するだけ[0]です。

于 2012-10-30T21:32:21.453 に答える