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

Question

What I am trying to do is create a "save", "edit", and "hide: button for my website which applies to specific posts and comments, exactly like these buttons on Reddit. For now I am trying to self teach jQuery AJAX and attempting to figure out how to submit data to the database without having to reload the whole page. What I am attempting to do here is save a string by submitting it to a table called "Saved" when I click on "save", and edit, and hide the specific comment. However, the div id is static. I want to be able to make it dynamic when run through the loop so I can call the id selector in jQuery to complete the ajax functions for the specific comment. However, I cannot put php code into jQuery so calling the specific php $id variable is out of the question.

HTML and 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>

PHP function

// Replace message1 with $id

function displayMsg($id, $comment){
    echo "<div id=\"message\" . $id ." style=\"border: solid 1px; width: 20%;\">";
    echo "<div id=\"pmessage\"><p>$comment</p></div>";
    echo "<a href=\"#\" class=\"Save\" style=\"color: blue;\">Save</a>";
    echo "<a href=\"#\" class=\"Edit\" style=\"color: blue;\">Edit</a>";
    echo "<a href=\"#\" class=\"Hide\" style=\"color: blue;\">Hide</a>";     
    echo "</div>";  
}

jQuery

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

    });
    $('a.Hide').click(function () {
        $("#message" + $id).hide();
        $("#message"  + $id).fadeIn(2000);
    });
    $('a.Edit').click(function () {
        if ($(this).text() == "Edit") {
            $("#pmessage").css("color", "red");
            $("a.Edit").text("Unedit");
        } else {
            $("#pmessage").css("color", "black");
            $("a.Edit").text("Edit");
        }
    });

    $('a.Save').click(function (e) {
        e.preventDefault();
        $("#1234").submit();
    });

    $("#1234").submit(function(e) {
        $("a.Save").text("Saving...");
        e.preventDefault();
        $.ajax({
               type: "POST",
               url: 'ajaxexample.php',
               data: $("#1234").serialize(),
               success: function(data)
               {
                $("a.Save").text("Unsave");
               }
             });
    });
});

Answer 1

You can select the div parent instead :

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

OR, you can add the attribute rel to your <a> like following :

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

And then :

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

For the edit button, change id="pmessage" to class="pmessage", the ID must be unique :

$('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
    }
});

About the save part :

$('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");
           }
         });
});
*/

Create one form for each comment :

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>';
}

NB : You need to change the a.save click statement.