Javascript 在Jquery中创建删除和回复按钮

这是我在网站上的第二篇文章。在我尝试的所有其他网站中，这一个提供了最准确和有用的信息

我在按钮方面有点麻烦，我有一个任务来创建一个收件箱，并在邮件的每个实例中添加一个“回复”和“删除”按钮

我确实想知道是否有比将HTML代码强制写入脚本更好的方法，因为每个消息都是动态生成的。如有任何帮助和/或建议，将不胜感激！（从JSON文件调用对象）

$（文档）.ready（函数（）{
$.getJSON（'public/js/data.json'，函数（json）{
$.each（json.data，函数（i，数据）{
var输出=“”；
if（data.from.id！=“234”&&data.from.name！=“Alan Ford”）{
$（“#收件箱”）。追加(
输出+=
''+
''+data.from.name+'-'+data.subject+''+//这给出了发送消息的人的姓名和主题
''+数据。消息\u格式化+''+//消息的内容
//按钮应该挤在日期的左边
//这将给出发送消息的日期
''+数据.发送日期\格式化.格式化+''
''
);
}});
});
});
var date_sent=convertToDateTime（）；
函数删除_消息（id）{
log（'Delete message with id:'+id'）；
}
功能回复信息（id，发件人）{
console.log（'消息id:'+id）；
console.log（'回复：'+发件人）；
}

这样，您就可以为html中的每个删除/回复按钮添加一个类和id。 假设您有这样一个简单的列表

<div> 
    <button class="deleteButton" id="1">Message 1</div>
    <button class="replyButton" id="1">Message 1</div>

    <button class="deleteButton" id="2">Message 2</div>
    <button class="replyButton"  id="2">Message 2</div>

    <button class="deleteButton" id="3">Message 3</div>
    <button class="replyButton"  id="3">Message 3</div>
</div>

信息1
信息1
信息2
信息2
信息3
信息3

---

现在，如果您单击其中一个按钮，您将收到一个通知，告诉您按钮的id。

jquery html模板应该做什么呢？jquery模板也可能是一个很好的起点。您使用的是什么服务器技术？如果我没有弄错，我想这不是我要找的。让我们这样说吧。正如您所看到的，根据代码，对于JSON文件中生成的每个消息，都应该有一个“删除”和“回复”按钮。不需要隐藏它们，只需为每条消息显示一个按钮。这将删除给定的消息或对其进行答复。如果我误解了你的意思，我真的很抱歉，我只是对使用DBs解析数据和进行动态输入有点陌生。如果你先隐藏它们，用户就看不到它们了。然后当你浏览每一条信息时，你可以选择是否显示它们。关键是让你的脚本不含html。你可以像你那样动态地插入html，但是如果你使用jquery函数来填充、删除、显示或隐藏html元素，它会更干净。显然，我们对此有不同的想法，有点分歧。如果你不介意的话，或者如果没有什么麻烦的话，你能详细说明一下吗？我知道我听起来像个该死的傻瓜，但我不想实现一切，如果可能的话，我会努力理解我在做什么。谢谢你的帮助！没问题：），好吧，让我稍微修改一下代码，让您看看。如果我理解正确的话，你有一个db的消息列表，其中包含删除和回复功能。是的，我有：）我确实不得不说，你们真是太棒了！

$(document).ready(function() {            //when de html document is loaded
    $(".deleteButton").each(function() {  //for each button with class *deleteButton*
        var button = this;                //we take the html element
        $(button).click(function() {      //and we bind an eventlistener onclick
            alert($(button).attr("id"));  //when the user clicks we tell him the id 
            // code to execute when the user clicks on a delete button
        });
    });

    $(".replyButton").each(function() {
        var button = this;
        $(button).click(function() {
            alert($(button).attr("id"));
            // code to execute when the user clicks on a reply button
        });
    });
});

<div> 
    <button class="deleteButton" id="1">Message 1</div>
    <button class="replyButton" id="1">Message 1</div>

    <button class="deleteButton" id="2">Message 2</div>
    <button class="replyButton"  id="2">Message 2</div>

    <button class="deleteButton" id="3">Message 3</div>
    <button class="replyButton"  id="3">Message 3</div>
</div>