關於產品選擇的形式孩子的jQuery

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倍的圖片，因爲find會發現所有出現的textarea與c omment_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> 

下面

是註釋形式，這是不是在T他記錄的一切，當某些錨被點擊的形式彈出下面.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：

-------------開始爲EACH-- ------------

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

---------- END --- FOR EACH ---------圖像...

Answer 1

首先，更改您的表單的選擇器。我想你可以使用id選擇器按名稱選擇表單，但是你不應該在頁面上重複id，所以jQuery live可能只能看第一個表單。雖然這只是一個猜測。

此外，您用於textarea的class/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 s是否有在每一頁？對於正確的HTML，每頁只能有一個id ='comment_text'和一個id ='comment_form'。

考慮更改IDS類=「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; 
});