Question

我要做的是为我的网站创建一个＆＃34;保存＆＃34;，＆＃34;编辑＆＃34;和＆＃34;隐藏：按钮，该按钮适用于特定的帖子和评论，喜欢Reddit上的这些按钮。目前我正在尝试自学jQuery AJAX并试图弄清楚如何将数据提交到数据库而无需重新加载整个页面。我在这里尝试做的是通过将其提交到名为＆＃34; Saved＆＃34;的表来保存字符串。当我点击＆＃34;保存＆＃34;，然后编辑并隐藏特定评论。但是，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>

PHP功能

//将message1替换为$ 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

您可以将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>";

然后

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

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

    });

或使用onclick功能并在javascript中单独管理

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

...

Answer 2

您可以选择div父代：

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

或者，您可以将属性rel添加到<a>，如下所示：

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

对于修改按钮，将id="pmessage"更改为class="pmessage"，ID必须是唯一的：

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

注意：您需要更改a.save点击声明。

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

2 个答案: