Question

我再次询问有关评论表单的问题，我正在创建一个图片网站，每个图片都有自己的评论表单，所以当我提交表单时，我喜欢这样：

$('#comment_form').live('submit', function() {
 ...

所以为了只选择这种形式textearea值，我尝试使用这个，但我得到未定义的错误，这是我尝试的方式：

$('#comment_form').live('submit', function() {
 image_comment_text=$(this).closest("#comment_text").val(); //textarea id is comment_text

我尝试使用find（），它的工作但是当我提交几张图片的评论时，我会得到2或3次评论，因为我发现所有出现的textarea都带有comment_text id ..我怎么能这样做？

@molf，这是由javascript生成的HTML：

var xHTML = "<div class=\"addComment\">";
   xHTML += "<form action=\"<?=base_url()?>images/post_comment/" + post + "\" method=\"post\" class=\"comment_form\" name=\"comment_form\">";
   xHTML += "<input type=\"hidden\" class=\"comment_post_id\" name=\"comment_post_id\" value=\"" +post + "\"/>"; 
   xHTML += "<textarea class=\"comment\" name=\"comment_text\" rows=\"8\" cols=\"40\"></textarea>";
      xHTML += "<input type=\"submit\" name=\"submit\" class=\"post_image_comment\" value=\"Comment\"><span> Don't make it too big!</span>";
   xHTML += "</form></div>";

修改

当我打印到控制台记录textarea的值时，我只得到一个结果，现在当我尝试追加ul注释时，我得到2个相同的值..这里是怎么回事..

<ul class="comments"></ul>

下面是评论表单，根本不在文档中，当单击某个锚点时，表单会弹出.comments，表单提交时我想附加注释以将新注释添加到列表项目现有的无序列表注释，这里是整个代码：

$('form[name^="comment_form"]').live('submit', function(event) {
  r= $(this).find('> .comment').val();

                $('<div class="overlay"></div>')
    .appendTo('.addComment')
             .fadeIn(200, function() {
          $('.comments')
             .append('<li id="new_append">' + r + '</li>')
              .children(':last')
           .height($('.comments li:last').height())
           .hide()
           .slideDown(800, function() { 
             var bodyHeight = $('html').height();
            $('.addComment').fadeOut(500, function() {
              $('html').height(bodyHeight);
           $('h2#leaveAComment').fadeOut(200, function(){$(this).text('Thank you for your comment!').fadeIn(200)});
          });
         });  
        $('html, body').scrollTo( $('#new_append'), 800 );
        });
    event.preventDefault();
            });

编辑II @patrick

加载评论表单的javascript在上面..这里是HTML：

-------------为每个开始--------------

<div id="image-12" class="image_content">
<img src="..." />
 <ul class="comments hidden"> //This is where the comments are appended to <li></li>

 </ul>

<div style="float: left; display: block; width: 100%;">
<a id="image_comment-12" class="image_comment" onclick="showComments('12');" href="javascript:;">Add Comment</a>
</div>

  <div id="addComment-12">//this is where the comment form loads

  </div>

</div>

----------结束---对于每个---------图像......

Answer 1

首先，更改表单的选择器。我认为您可以使用id选择器按名称选择表单，但是您不应该在页面上复制id，因此jQuery live可能只是在观看第一个表单。不过，这只是猜测。

此外，您使用textarea的类/ ID无关紧要。如果每个表单只有一个textarea，则可以使用:text选择器。找到孩子时，我喜欢使用儿童选择器。

$('form[name="comment_form"]').live('submit', function() {
  image_comment_text = $(this).find('> :text').val();
});

如果您使用的是名称而不是ID，因为您将有多个表单，我建议您将名称更改为comment_form_'image_id'，然后您的选择器将为：$('form[name^="comment_form"]')
请注意^，其中要求名称以“comment_form”开头。这样，您可以拥有唯一的表单名称（comment_form_234，comment_form_235），并且仍然具有所需的效果。

编辑：

我查看了你的代码更新，它让我觉得你忽略了函数中当前表单的上下文。例如，当您使用选择器$('.comments').append(...时，您将附加到页面上与该选择器匹配的所有元素。为了检索正确的元素，您必须始终将您的选择器用作$(this).find(' > .comments').append(...，这将在提交的表单的上下文中工作。

我花了几分钟编辑你的代码，我没有运行它或任何东西，但它应该接近你想要做的。我希望它至少让你开始朝着正确的方向前进：

$('form[name^="comment_form"]').live('submit', function (event) {
    r = $(this).find('> .comment').val();
    /* get addComment-classed element */
    var addComment = $(this).find(' > .addComment:first');

    /* get comments-classed element */
    var comments = $(this).find(' > .comments:first');

    $('<div class="overlay"></div>').appendTo(addComment).fadeIn(200, function () {
        /* note comments element, not selector */
        $(comments).append('<li id="new_append">' + r + '</li>').children(':last').height(
        /* again, element */
        $(comments).find(' > li:last').height()).hide().slideDown(800, function () {
            var bodyHeight = $('html').height();

            /* again, element */
            $(addComment).fadeOut(500, function () {
                $('html').height(bodyHeight);
                $('h2#leaveAComment').fadeOut(200, function () {
                    $(this).text('Thank you for your comment!').fadeIn(200)
                });
            });
        });
        $('html, body').scrollTo($('#new_append'), 800);
    });
    event.preventDefault();
});

我在代码中添加了注释，但请注意addComments和注释选择器是“缓存”的。如果您要多次访问这些元素，在使用它们之前将它们存储在变量中将减少DOM遍历。这应该可以解决您的评论被添加到页面上的多个元素的问题。

Answer 2

首先，如果在适当的上下文中使用，find（）方法是正确的方法。

其次，听起来你正在重新使用ID。这是不允许的。一个ID只能在页面上使用一次。

nearest（）函数从（或包括）DOM元素中搜索“up”。 find（）函数搜索元素的内容。

编辑：

我假设用户点击提交按钮时正在提交表单。我还假设您的submit()处理程序比显示的更多。这是对的吗？

有时您需要添加$(this).preventDefault();以防止在您的代码中提交表单，以及“提交”按钮的默认行为。

以下与find（）完全相同（基本上）。它将在提交的表单中找到带有.comment_text类的项目。所以它应该只抓取一个项目的值：

image_comment_text=$(".comment_text", this).val();

Answer 3

每页有多少comment_form个？对于正确的HTML，每页只应有一个id ='comment_text'和一个id ='comment_form'。

考虑将您的ID更改为class ='comment_text'并使用.comment_text而不是#comment_text

查找

我认为，根据您的最新评论，问题可能是您将表单/评论文本框动态添加到页面的方式。

输入评论并提交后，您是否删除了动态添加的表单？我会推荐这个，好像不是我认为你的DOM结构变得混乱导致你遇到的问题。

Answer 4

您将收到重复的评论，因为您没有删除之前的添加评论表单。尝试将其添加到.slideDown回调函数的末尾：

$(this).remove();

这是完整的提交功能，我做了一些更改/添加：

我从>中删除了find('.comment')，因为没有必要
将新附加内容更改为某个类，然后在滚动到该类后将其删除。
完成后删除表单
将event.preventDefault();更改为return false; ...这比个人更喜欢个人偏好。

我希望这会有所帮助：）

 $('form[name^="comment_form"]').live('submit', function(event) {
  r = $(this).find('.comment').val();
  $('<div class="overlay"></div>')
   .appendTo('.addComment')
   .fadeIn(200, function() {
    $('.comments')
     .append('<li class="new_append">' + r + '</li>')
     .children(':last')
     .height($('.comments li:last').height())
     .hide()
     .slideDown(800, function() {
      var bodyHeight = $('html').height();
      $('.addComment').fadeOut(500, function() {
       $('html').height(bodyHeight);
       $('h2#leaveAComment').fadeOut(200, function(){$(this).text('Thank you for your comment!').fadeIn(200)});
       $(this).remove();
      });
     });
     $('html, body').scrollTo( $('.new_append:last'), 800 );
     $('.new_append').removeClass('new_append');
   });
  return false;
 });

关于选择表格儿童jquery的问题

4 个答案: