Javascript 如何在PHP中循环时为html div生成唯一ID

我想做的是创建一个“保存”、“编辑”和“隐藏：适用于特定帖子和评论的我的网站按钮，与Reddit上的这些按钮完全相同。目前，我正在尝试自学jQueryAjax，并试图找出如何在不必重新加载整个页面的情况下将数据提交到数据库。我在这里试图做的是保存一个字符串，当我单击“保存”时，将其提交到一个名为“保存”的表中，然后编辑并隐藏特定的注释。但是，div id是静态的。我希望在循环中运行时能够使其动态化，这样我就可以调用jQuery中的id选择器来完成特定注释的ajax函数。但是，我无法将php代码放入jQuery，因此调用特定的php$id变量是不可能的

HTML和PHP5

<div id="main">
    <?php
        $comments = array("Message 1 is the first!", "Message 2 comes in second!", "This is the third message!");    

        for($i = 1; $i <= 3; $i++) {
            $id = $i;
            $comment = $comments[$i - 1];
            displayMsg($id, $comment);
        }
    ?>
    <form action="ajaxexample.php" method="post" style="display: none" id="1234">
        <input type="hidden" name="message" id="message" value="<?php echo $comment; ?>">
    </form> 
</div>
    </form>

---

例如，您可以将id传递给元素

 echo "<a href=\"#\" id=\"".$id."\" class=\"Save\" style=\"color: blue;\">Save</a>";
    echo "<a href=\"#\" id=\"".$id."\"  class=\"Edit\" style=\"color: blue;\">Edit</a>";
    echo "<a href=\"#\" id=\"".$id."\"  class=\"Hide\" style=\"color: blue;\">Hide</a>"; 

或者使用函数onclick和javascript分别管理它们

 echo "<div style=\"color: blue;\" onclick=\"save($id)\">Save</div>";

echo“保存”；

---

…

您可以选择div父级：

$('a.Hide').click(function () {
    $(this).parent().hide();
    $(this).parent().fadeIn(2000);
});

或者，您可以将属性

rel

添加到

”；
回声'；
回声'；
回声'；
回声'；
回声“
回声'；
}

---

注意：您需要更改

a.save

click语句。

您不能有任何重复的id。使用类，然后使用jQuery遍历DOM的能力来执行所需的操作。谢谢，这非常有用！如何仅在单击标签后更改其各自div中的标签？当我按edit时，所有的edit标记都变为unedit。还有什么我可以更改我单击的用户名吗？@您应该使用

$（此）

而不是全局选择器，检查我的更新答案是的，我知道了，谢谢。你知道如何做“保存”部分吗？试图在jQuery中计算表单和输入确实让我感到困惑。好吧，保存部分有什么问题吗？因为我正在循环注释div，隐藏输入的值只会在循环完成后存储数组中的最后一个元素。我想在单击特定div中的save按钮后，能够将注释保存在该div中。您能用save函数展开jQuery吗？我发现这很难解决。我只能保存循环中的最后一条注释。在传递id或rel之前，请使用函数save of the answer

$('a.Save').click(function () {

var id=$(this).attr('id');

    });

 echo "<div style=\"color: blue;\" onclick=\"save($id)\">Save</div>";

$('a.Hide').click(function () {
    $(this).parent().hide();
    $(this).parent().fadeIn(2000);
});

echo "<a href=\"#\" class=\"Edit\" rel=\"" . $id ."\" style=\"color: blue;\">Edit</a>";
echo "<a href=\"#\" class=\"Hide\" rel=\"" . $id ."\" style=\"color: blue;\">Hide</a>";  

$('a.Hide').click(function () {
    var id = $(this).attr('rel');
    $('#message' + id).hide();
    $('#message' + id).fadeIn(2000);
});

$('a.Edit').click(function () {
    if ($(this).text() == "Edit") {
        $(this).parent().find('.pmessage').css("color", "red");
        $(this).text("Unedit"); // <-- HERE, use $(this) instead
    } else {
        $(this).parent().find('.pmessage').css("color", "black");
        $(this).text("Edit"); // <-- HERE, use $(this) instead
    }
});

$('a.Save').click(function (e) {
    e.preventDefault();
    var $form = $(this).parent().find('form'),
        $this = $(this);

    $.ajax({
           type: $form.attr('method'),
           url: $form.attr('action'),
           data: $form.serialize(),
           beforeSend : function(){
               $this.text("Saving...");
           },
           success: function(data)
           {
              $this.text("Saved");
           },
           error: function(){
              $this.text("Unsaved");
           }
         });
});
/*
$("#1234").submit(function(e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
           type: $this.attr('method'),
           url: $this.attr('action'),
           data: $this.serialize(),
           beforeSend : function(){
               $("a.Save").text("Saving...");
           },
           success: function(data)
           {
              $("a.Save").text("Saved");
           },
           error: function(){
              $("a.Save").text("Unsaved");
           }
         });
});
*/

function displayMsg($id, $comment){
    echo '<div id="message' . $id .'" style="border: solid 1px; width: 20%;">';
    echo '<div class="pmessage">'.$comment.'</div>';
    echo '<a href="#" rel="'.$id.'"  class="Save" style="color: blue;">Save</a>';
    echo '<a href="#" rel="'.$id.'" class="Edit" style="color: blue;">Edit</a>';
    echo '<a href="#" rel="'.$id.'" class="Hide" style="color: blue;">Hide</a>';
    echo '<form method="POST" action="mypage.php" style="display:none">';
    echo '<input type="text" name="message" value="'.$comment.'">';
    echo '</form>'
    echo '</div>';
}