我正在制作一个评级系统,我的 index.php 页面上有以下 jQuery 代码:
<script type="text/javascript">
$(document).ready(function() {
$("[id^=rating_]").hover(function() {
var rid = $(this).attr("id").split("_")[1];
$("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {
$("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");
/* The hovered item number */
var hovered = $(this).parent().attr("class").split("_")[1];
var hovered2 = $(this).parent().attr("class").split("_")[1];
while(hovered > 0) {
$("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
hovered--;
}
$("#rating_"+rid).children("[class^=star_]").click(function() {
var current_star = $(this).attr("class").split("_")[1];
$.post("send.php", {rating: current_star, id: rid});
});
});
});
});
</script>
基本上有一个悬停效果,然后当您点击星星时,它会向 send.php 发送一个发布请求,其中包含点击的评级信息和元素的 ID。在这个脚本下面我有一些看起来像这样的 PHP:
<?php
$query = mysql_query("SELECT * FROM test");
while($row = mysql_fetch_array($query)) {
$rating = (int)$row[rating];
?>
<div id="rating_<?php echo $row[id]; ?>">
<span class="star_1"><img src="star_blank.png" alt="" <?php if($rating > 0) { echo"class='hover'"; } ?> /></span>
<span class="star_2"><img src="star_blank.png" alt="" <?php if($rating > 1.5) { echo"class='hover'"; } ?> /></span>
<span class="star_3"><img src="star_blank.png" alt="" <?php if($rating > 2.5) { echo"class='hover'"; } ?> /></span>
<span class="star_4"><img src="star_blank.png" alt="" <?php if($rating > 3.5) { echo"class='hover'"; } ?> /></span>
<span class="star_5"><img src="star_blank.png" alt="" <?php if($rating > 4.5) { echo"class='hover'"; } ?> /></span>
<div class="clearleft"> </div>
</div>
<br />
<?php
}
?>
然后当然我有一些 CSS 让它看起来不错。
send.php 文件如下所示:
<?php
mysql_connect("localhost", "admin", "") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$rating = (int)$_POST['rating'];
$id = (int)$_POST['rid'];
$query = mysql_query("SELECT * FROM test WHERE id = '".$id."'") or die(mysql_error());
while($row = mysql_fetch_array($query)) {
if($rating > 5 || $rating < 1) {
echo"Rating can't be below 1 or more than 5";
}
else {
$total_ratings = $row['total_ratings'];
$total_rating = $row['total_rating'];
$current_rating = $row['rating'];
$new_total_rating = $total_rating + $rating;
$new_total_ratings = $total_ratings + 1;
$new_rating = $new_total_rating / $new_total_ratings;
// Lets run the queries.
mysql_query("UPDATE test SET total_rating = '".$new_total_rating."' WHERE id = '".$id."'") or die(mysql_error());
mysql_query("UPDATE test SET rating = '".$new_rating."' WHERE id = '".$id."'") or die(mysql_error());
mysql_query("UPDATE test SET total_ratings = '".$new_total_ratings."' WHERE id = '".$id."'") or die(mysql_error());
}
}
?>
数据库表中有3个评分列; total_rating:总评分(所有评分相加)。 评级:当前评级 total_ratings:评分数量。
问题是,如果我将 $_POST['rating'] 和 $_POST['rid'] 更改为 $_GET 并将信息放入 url,例如 send.php?id=1&rating=4,它有效,并且数据库得到更新。但是,当我按下星星时,数据库没有更新。在弄乱了脚本之后,我意识到帖子一定是有效的,但是 id 返回为 0。
为了进一步测试,我将其放入点击函数中:
document.write(current_star+rid);
查看返回的内容。问题似乎是返回的数字乘以我悬停在元素上的次数。因此,如果我将鼠标悬停在 6 颗星上,则 current_star 和 ID 将重复 6 次。
我觉得我已经非常接近让它工作了,有没有人知道它是怎么回事?提前致谢。
最佳答案
关于 jQuery 的事件处理,重要的是它是基于注册表的,这意味着 jQuery 允许您为任何特定事件注册多个回调,并且它将按顺序调用它们他们被绑定(bind)了。
您看到重复的 current_star
和 id
值的原因是您在每次悬停时不断绑定(bind)越来越多的事件。这是因为在 hover()
调用中调用了 click()
,因此每次悬停时,都会绑定(bind)另一个 click() 事件。
尝试在您的悬停事件之外绑定(bind)您的 click()
事件,使用如下内容:
$("[id^=rating_]").children("[class^=star_]").click(function() {
var rid = $(this).parent().attr("id").split("_")[1];
var current_star = $(this).attr("class").split("_")[1];
$.post("send.php", {rating: current_star, id: rid});
});
出于同样的原因,您可能也不希望将一个 hover()
调用绑定(bind)到另一个调用中。
关于php - jQuery 中的 $.post() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1401629/