我如何讓我的jQuery函數爲foreach循環中的每個元素工作？

Question

我有一個foreach循環顯示的職位，他們都帶有註釋按鈕

<button type="button" class="commentbtn" id="comment"> 
    <i class="em em-thought_balloon"></i> 
</button> 

本身工作正常功能，但僅限於最近顯示的崗位，而不是其他的。我試圖讓每個帖子評論按鈕單獨點擊時工作。這是功能

$(document).ready(function(){ 
    $("#commentform").hide(); 
    $("#comment").click(function(event) { 
     $("#commentform").show(); 
    }); 
}); 

任何想法如何我可以很容易地解決這個問題？

編輯：這是我使用的HTML，它的Laravel集體

{!! Form::open(['method'=>'POST','class'=>'commentForm']) !!} 
{!! Form::textarea('Comment', null, ['size'=>'50x2']) !!} 
{!! Form::button('Comment', ['type'=>'submit', 'class'=>'btn btn-primary'])!!} 
{!! Form::button('Cancel', ['class'=>'btn btn-default cancelComment']) !!} 
{!! Form::close() !!} 

Answer 1

$("#commentform").hide(); 
$(".commentbtn").each(function(index){ 
    $(this).click(function(event) { 
     $(this).next().find(".commentform").show(); 
    }); 
}); 

按下任意鍵這將工作。

更新：我將#commentform id選擇器更改爲.commentform。

如果您的.commentform低於按鈕，這將會正常工作。

---

UPDATE：

我不知道laravel但我猜你所提供的形式，得到的HTML是是：

<form method="POST" class="commentForm"> 
    <textarea name="Comment" cols="50" rows="2"></textarea> 
    <button name="Comment" type="submit" class="btn btn-primary">Comment</button> 
    <button name="Cancel" class="btn btn-default cancelComment">Cancel</button> 
    </form> 

和註釋按鈕，你前面說的：

<button type="button" class="commentbtn" id="comment"> 
    <i class="em em-thought_balloon"></i> 
    </button> 

這是你的解決方案與普通的js，它隱藏s各自表格，並顯示每一個當您單擊.commentbtn按鈕：

'use strict'; 
    window.addEventListener('load',() => { 
    document.querySelectorAll('.commentForm').forEach(form => { 
     form.style.display = 'none'; // Hide all the forms 
    }); 
    document.querySelectorAll('.commentbtn').forEach(button => { 
     button.addEventListener('click', event => { 
      // Show the corresponding form 
      event.target.parentNode.querySelector('.commentForm').style.display = 'block'; 
     }); 
    }); 
    }); 

而jQuery的版本：

$(document).ready(function(){ 
    $('.commentForm').each(function(index){ 
     $(this).hide(); // Hide all the forms 
    }); 
    $('.commentbtn').each(function(index){ 
     // Show the corresponding form 
     $(this).parend().find('.commentForm').show(); 
    }); 
    }); 

，如果你包裝每個表單這隻會工作 - 按鈕，HTML與像一個容器這個：

<div> 
    <form method="POST" class="commentForm"> 
     <textarea name="Comment" cols="50" rows="2"></textarea> 
     <button name="Comment" type="submit" class="btn btn-primary">Comment</button> 
     <button name="Cancel" class="btn btn-default cancelComment">Cancel</button> 
    </form> 
    <button type="button" class="commentbtn" id="comment"> 
     <i class="em em-thought_balloon"></i> 
    </button> 
    </div> 

Answer 2

您正在使用相同的ID倍增時間通過循環綁定。不要這樣做。使用類。

$(".commentform").hide(); 
    $(".commentbtn").click(function(event) { 
     $(this).next().find('.commentform').show(); 
    });