gpt4 book ai didi

javascript - jQuery/JavaScript 防止重复追加

转载 作者:行者123 更新时间:2023-12-01 05:19:50 25 4
gpt4 key购买 nike

我正在尝试原型(prototype)化的模拟论坛系统遇到了一个看似小问题,因为我创建的以下数组和表函数由于我使用的 append 而在屏幕上复制了论坛表,并且我不知道如何避免这种情况或修改这一点(即,如果用户重复单击论坛页面,论坛将重复生成)。我对这门语言仍然相当了解,但从我从类似帖子中发现的情况来看,我尝试应用的所有内容都没有解决问题。

var index;    

var topics = [
{title: "Football Topics", followers: 280, articles: 5, posts: [
{postId: 101, contents: "Dummy content", author: "Dummy content", replies:[
{replyId: 1, contents: "Dummy content", author: "Dummy content"},
{replyId: 2, contents: "Dummy content", author: "Dummy content"},
{replyId: 3, contents: "Dummy content", author: "Dummy content"}
]},
]}
];

var topicTable = $("<table class='forumTable'><tr><th>Title</th><th>Posts</th><th>Followers</th></tr></table>");

//console test
//console.log(topics);

//Looping all topics in variable "topics"
for (index in topics) {
//console test
console.log(topics[index].title);
var row = $("<tr></tr>");
row.append("<td>" + topics[index].title + "</td>");
row.append("<td>" + topics[index].articles + "</td>");
row.append("<td>" + topics[index].followers + "</td>");

topicOnClick(row, topics[index]);
topicTable.append(row);
}

page.append(topicTable);

最佳答案

根据您提供的内容,我认为有几个选择。

选项 1

您说如果用户重复“点击”论坛页面,则意味着存在点击处理程序。您可以使用 .one 最多执行该函数一次。

var table = "<table><tr><td>column1</td><td>column2</td></tr></table>";
$('button').one('click', function() {
$('#tableContainer').append(table);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="tableContainer">
</div>

<button>add</button>
</body>

选项 2

您可以定位容器 div 并使用 .html() 这将允许该函数在每次点击时运行,但会覆盖内容,因此它看起来只加载一次。

var table = "<table><tr><td>column 1</td><td>column 2</td></tr></table>";
$('button').on('click', function(){
$('#tableContainer').html(table);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="tableContainer">
</div>

<button>add</button>
</body>

关于javascript - jQuery/JavaScript 防止重复追加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45450677/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com