改善星級評分系統

我爲學校項目製作了星級評分系統，需要一些幫助來改進它。這是一個相當簡單的設置：index.php包含列表項目（內容從數據庫中獲取）與一個圖像和一個持有恆星評級的div。每顆星星都是一個鏈接，它會觸發一個將評分保存在數據庫中的功能。改善星級評分系統

Here's 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>"; 
    } 
} 
?>

來源

2012-10-30 kmaar

您可以使用迭代器爲每個元素提供不同的ID，然後您可以通過正確的ID動態獲取元素。例如：

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

然後：

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

這將動態地選擇所需的元素。

關於您的代碼一般情況下，我只是必須指出你的方向http://jquery.com/ 它會使元素選擇更簡單，並且還將使用ajax標準化。

來源

2012-10-30 21:32:25 Flosculus

非常感謝！我增加了一個類的div以及風格的div一起，它的工作完美！感謝您對jQuery的建議，我會檢查出來。 – kmaar

tbh我甚至不知道它會工作大聲笑 – Flosculus

-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元素。然後我們發現前面找到的類ratedINSIDEprojID的元素。現在請注意，getElementsByClassName會返回一個數組，無論元素的數量如何，但由於我們只有一個，因此我們只需在第一個索引[0]處選擇該項目。

來源

2012-10-30 21:32:21 wiill

getElementByClassName許多舊版本的當前流行的瀏覽器（例如：着名的IE），但它總是可以添加到代碼庫，我推薦很多。 – SinistraD

你在哪裏找到一個projid元素？ – Bytemain

我同意getElementsByClassName在IE5/6/7/8中不受支持，但每個其他瀏覽器都支持它。但是polyfills可用。現在對誰低估了我，我不認爲這個細節是值得的。 – wiill

更改你的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-30 21:38:46

使用一個計數器$id遞增李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-30 21:41:01

改善星級評分系統

回答

相關問題