javascript - 如果表很大，我对表中元素的一点 ajax 就会中断。怎么修？

Question

我的页面包含多个由 php/mysql 生成的表。其中一个元素是输入/输出按钮。我对其进行了 ajax 处理，以便每次单击时按钮都会更改为打开或关闭图像，而无需重新加载页面。

而且效果非常好!直到它没有。如果一个表或表的组合超过这么多行......它停止工作。但仍然适用于它上面的行。为什么会这样？

这是表生成...这发生在多个 php 文件中。

<tbody>
<?php while($row = MySQL_fetch_array($result)):
$id = htmlentities($row['id']);
$status = htmlentities($row['status']);
include ("button.php");
?>
<tr>
        <td title="lname" width="100px">
            <div style="width:100px; overflow:hidden;">
                <?php echo(htmlentities($row['last_name'])); ?>
            </div>
        </td>
        <td width="100px">
            <div style="width:100px; overflow:hidden;">
                <?php echo(htmlentities($row['first_name'])); ?>
            </div>
        </td>    
        .
        .
        .
        <td>
        <div style="width:100px; overflow:hidden;">
                <?php echo '<div><div id="r'.$id.'"><div id="test"><img class="rating" id="'.$status.$id.'" src="'.$color.'"><div style="display:none;">'.$status.'</div></div></div></div>';?>
        </div>
        </td>
</tr>
<?php endwhile; ?>

这是脚本:

<script>
        $(function(){
            $(document).on("click", ".rating", function(){
                var status = $(this).attr("id").substr(0,1);
                var id = $(this).attr("id").substr(1);
                var data = "id="+id+"&status="+status;

                $.ajax({
                    type: "POST",
                    url: "rate.php",
                    data: data,
                    success: function(e){
                    $("#r"+id).html(e);
                }

            })
        });
    });
    </script>

这是上面代码中引用的 rate.php:

<?php
include ("db.php");
$id = $_POST["id"];
$newstatus = $_POST["status"];

if($newstatus == 0){
    mysql_query("UPDATE users SET status = 1 WHERE id='$id'");
}
else {
    mysql_query("UPDATE users SET status = 0 WHERE id='$id'");
}
include("button.php"); //FILE WITH THE LIKE & DISLIKE BUTTONS AND THE NUMBER OF LIKES & DISLIKES

$list = '<div id="test"><img class="rating" id="'.$q[0].$id.'" src="'.$color.'"><div style="display:none;">'.$q[0].'</div>';

echo $list;
?>

以及上面引用的 button.php 文件:

<?php 

$q = mysql_query("SELECT status FROM users WHERE id='$id'");
$q = mysql_fetch_array($q);

if($q[0]){
    $color = "green.png";
}
else{
    $color = "red.png";
}
?>

所以是的...如果一个表的 mysql 查询太大，在一定数量的行之后，输入/输出按钮停止工作。或者，如果我有多个较小的表，一旦它超过一定的总行数，同样的事情。

帮忙吗？

Answer 1

在评论中调试时，发现使用了重复的 ID。 ID在单个页面内必须是唯一的，否则可能会出现意外结果(例如问题中描述的问题)。

要测试重复的 id，请使用属性等于选择器。

console.log($("[id=" + theidtotest + "]").length)

如果您从该行获得超过 1 个元素，则说明您做错了。