如何阻止对象生成相同内容的附加副本？ [英] How to stop an object from generating additonal copies of the same content?
本文介绍了如何阻止对象生成相同内容的附加副本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
每次按下按钮时，它都会继续输出相同的数据。我不希望这样，因为我不希望我的网站上的用户不小心再次按下按钮并注意到再次输出相同数据的另一个副本，所以我该如何防止这种情况。
这是一个GIF动画示例，我的意思。
这里是我正在谈论的代码。
index.php
<！DOCTYPE html>< html>< head>< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js> < /脚本><脚本> $（document）.ready（function（）{var z = $（'。z'）; //抓取类z来切换var x = $（'＃x'）; var output =''; var XHR = function （）{$ .getJSON（x.json，function（data）{$ .each（data.shop，function（index，element）{for（var j in element）{output + = element [j] +' < br>';}}）; x.html（输出）;}）;}; $（按钮）。click（function（）{XHR（）;}）;}）; < /脚本> <风格> h1 {color：gold;} #x {color：white; text-align：center;}。z {background-color：red;宽度：250px;保证金：自动; padding-bottom：5px;}< / style>< / head>< body>< div class =z>< h1>详细信息< / h1>< h2 id =x> ;< / H2>< / DIV><按钮>点击< /按钮>< / BODY>< / HTML>
x.json
{
shop：[{
item：Ps3，
cost：$ 150
}，
{
item：xbox 360，
费用：$ 140
}，
{
事件：黑色星期五，
日期：4-25-2018
}，
{
special_guest：John Doe，
时间：下午4:30
}
]
}
解决方案
你不断附加输出。
只需更改
var output ;
var XHR = function（）{
output =;
...
喜欢这个
< pre class =snippet-code-js lang-js prettyprint-override>
$（function（）{var z = $（'。z'）; //抓取类z来切换var x = $（'＃x'）; var输出; var XHR = function（）{output =; var data = {shop：[{item：Ps3，cost：$ 150}， {item：xbox 360，cost：$ 140}，{event：Black Friday，date：4-25-2018}，{special_guest：John Doe ，time：4:30 pm}]} $ .each（data.shop，function（index，element）{for（var j in element）{output + = element [j] +'< br> ;';}}）; x.html（输出）;}; $（按钮）。click（function（）{XHR（）;}）;}）;
h1 {color：gold;} #x {color：white; text-align：center;}。z {background-color：red;宽度：250px;保证金：自动; padding-bottom：5px;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script><div class =z> < h1>详细信息< / h1> < h2 id =x>< / h2>< / div>< button>点击< / button>
Every time when I press the button it keeps outputting the same data additionally. I don't want that because I don't want my users on my website to accidentally press the button again and notice another copy of the same data being outputted again so how do I prevent that.
Here's a GIF animated example what I mean.
and here's the code i'm talking about.
index.php
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var z = $('.z'); // Grab class z to toggle
var x = $('#x');
var output = '';
var XHR = function(){
$.getJSON("x.json", function(data) {
$.each(data.shop, function(index, element) {
for (var j in element) {
output += element[j] + '<br>';
}
});
x.html(output);
});
};
$("button").click(function(){ XHR(); });
});
</script>
<style>
h1 {
color: gold;
}
#x {
color: white;
text-align: center;
}
.z {
background-color: red;
width: 250px;
margin: auto;
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class="z">
<h1>Details </h1>
<h2 id="x"></h2>
</div>
<button>Click</button>
</body>
</html>
x.json
{
"shop": [{
"item": "Ps3",
"cost": "$150"
},
{
"item": "xbox 360",
"cost": "$140"
},
{
"event": "Black Friday",
"date": "4-25-2018"
},
{
"special_guest": "John Doe",
"time": "4:30 pm"
}
]
}
解决方案
You continously append to output.
Just change
var output;
var XHR = function() {
output = "";
...
Like this
$(function() {
var z = $('.z'); // Grab class z to toggle
var x = $('#x');
var output;
var XHR = function() {
output = "";
var data = {
"shop": [{
"item": "Ps3",
"cost": "$150"
},
{
"item": "xbox 360",
"cost": "$140"
},
{
"event": "Black Friday",
"date": "4-25-2018"
},
{
"special_guest": "John Doe",
"time": "4:30 pm"
}
]
}
$.each(data.shop, function(index, element) {
for (var j in element) {
output += element[j] + '<br>';
}
});
x.html(output);
};
$("button").click(function() {
XHR();
});
});
h1 {
color: gold;
}
#x {
color: white;
text-align: center;
}
.z {
background-color: red;
width: 250px;
margin: auto;
padding-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="z">
<h1>Details </h1>
<h2 id="x"></h2>
</div>
<button>Click</button>
这篇关于如何阻止对象生成相同内容的附加副本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
