Question

我正在添加一些jQuery编辑/删除现有注释，我正在制造一团糟，所以我想我会就更好的方法提出建议。

以下是测试页：http://www.problemio.com/problems/problem.php?problem_id=228

这是测试登录：testing@problemio.com / testing

如果您转到评论标签并添加评论然后单击编辑，则添加评论的底部文本区域不会消失。但它应该因为我做了一个hide（）函数。这是我的代码：

表格我试图隐藏：

     <p class="comment_bottom_text">
          <!-- Make a form for people to add comments -->
          <form id="add_comment" name="problem_comment_form" method="post">
               <p>
                  <textarea name="problem_comment" cols=70 rows=6 id="problem_comment"></textarea>
               </p>
               <p>
                  <input type="hidden" id="comment_problem_id" name="problem_id" value="<?php echo $problem_id; ?>" />

                  <span class="error"   id="add_message_error" style="display:none"> Please Enter Valid Data</span>
                  <span class="success" id="add_message_success" style="display:none"> Message Added Successfully!</span>

                  <input type="submit" class="button" value="Add Message"></input>
               </p>
          </form>
     <p>

jQuery的：

$('.edit_comment').live('click' , function() 
{
    // Showing the wait image
    $("#loading").show();

    var problem_id = $(this).attr("data-problem_id");
    var problem_comment_id = $(this).attr("data-problem_comment_id");  
    var problem_comment_text = $(this).attr("data-problem_text");

    // problem_comment_text_'.$problem_comment_id.'
    var div_name = "problem_comment_text_" + problem_comment_id;
    //alert ("div name: " + div_name );
        //var dataString = 'problem_id='+ problem_id + '&problem_comment_id=' + problem_comment_id;

    // Now validate the input
        if( problem_id == '' || problem_comment_id == '' )
        {
       //$('#add_message_success').fadeIn(200).hide();
        //$('#add_message_error').fadeOut(200).show();          
        }
        else
        {   
            // Check if the person is logged in.
            // Now check if the person is logged in.
        $.ajax({
                type: "POST",
                url: "/auth/check_login.php",
                dataType: "json",
                success: function(data)
                {
                    $("#loading").hide();

                    //Maybe just switch up how the forms look like here.
                    // 1) close that piece of HTML
                    // Get the name of that piece of HTML.
                    // problem_comment_'.$problem_comment_id.'
                    // Close div named:                         
                    $("#" + div_name).hide();  // Works

                    // 2) Make an HTML form and display it in that piece of HTML
                    var new_comment_form = "<form id='add_comment' method='post'><p><textarea name='problem_comment' cols=60 rows=6 id='problem_comment'>" + problem_comment_text + "</textarea></p><p><input type='hidden' id='problem_id' name='problem_id' value='" + problem_id + "'><input type='hidden' id='problem_comment_id' value='" + problem_comment_id + "'></p><p><input type='submit' class='button' value='Edit Message'></input></p></form>";

                    // Now replace the current form with the crap I made above.
                    $("#" + div_name).html( new_comment_form );  // Works
                    $("#" + div_name).show(  );  // Works

                    //alert("before hide");
                    // 3) Hide the other text area form.
                    $(".comment_bottom_text").hide(); // TODO - MAKE THIS WORK
                    //alert("after hide");
                    // 4) Give a cancel button to undo the whole thing I did here. 
                },
                error: function(json) // Error for checking if user is logged in.
                {
                    // Showing the wait image
                    $("#loading").hide();                    

                    $("#loginpopup").dialog();

                    return false;           
                }
        });
        }         

     return false;
});

Answer 1

问题是你试图隐藏的html元素不包含你要隐藏的表单和buttom。如果您查看网络代码，这就是html的样子：

<p class="comment_bottom_text" style="display: none; ">
               <!-- Make a form for people to add comments -->
                  </p>

然后你有了表格。所以这不是一个jquery问题或错误你只是隐藏了你不想要的东西，请查看将表单放在

中的代码或更改选择器

编辑现有注释的更好方法

1 个答案: