当我从foreach列表中单击按钮时，如何激活它，仅激活该特定列表中的按钮？

Question

因此，我有一些按钮会切换一些可以在其中发送消息的输入文本区域，我该如何做，因此，当我单击特定列表中的按钮时，它只会激活该特定列表中的按钮。

我尝试了很多其他事情，但我真的不知道如何克服它。 我是JS的新手，主要是Java。

function showFeedback (list) {
var lines = "";
var counter = 0;
list.forEach(function (obiect) {
    $(document).ready(function(){
        $("button").click(function(){
            $("#div"+ obiect.idfeedback +"").fadeToggle("slow");
        });
    });
    counter++;
    var style = "";
    if(obiect.feedbackType == 1){
        style = "style=\"background: green;\"";
    } else if(obiect.feedbackType == 0){
        style = "style=\"background: red;\"";
    }

    lines += `<div class="page-block"><div style="text-align: right"><a href="feedback?action=delete&idfeedback=`+obiect.idfeedback+`">X</a></div><div class="cv-block" ${style} >
    <div id="parent_div_1">
        Name: ${obiect.firstn}
        ${obiect.lastn}
    </div>

    <div id="parent_div_2" style="float: right">
        Date: ${obiect.date}
    </div>
    <div class="message_div"><p>${obiect.message}</p></div>
</div>
<button>Contact</button>
<div id="div`+ obiect.idfeedback +`" style="display: none">
  <form action="contact" method="post">
    <textarea name="message" id="umessage" cols="30" rows="10" maxlength="450" placeholder="Type your message here..." style="height:115px;width: 620px"></textarea>
    <input type="hidden" name="email" id="umail" value="`+obiect.email+`">
    <input type="hidden" name="action" value="feedback">
    <div><input type="submit" value="Send Email"></div>
  </form>
</div>
</div>`;
}); if(counter==0){
    lines+= `<div class="page-block">No feedbacks to review.</div>`;
}
$("#obiect").html(lines);}

Answer 1

摆脱$(document).ready ，它用于确保在分配事件之前已加载标记。 在您的方案中，标记是动态生成的，加上循环内的document.ready没有意义。

修复此代码的最简单方法是将$('button')移到循环外。 循环后，执行以下操作

$('button').click(function(){
    $(this).next().fadeToggle("slow");
})

该代码的作用是在每个button元素的click事件上添加一个处理程序，当单击button时，它会找到放置在button元素旁边的元素（在您的情况下是必需的div元素），并显示该元素。