我正在尝试使用 HTML 和 JQuery 制作一个页面。我想要做的是在文本框中输入一封电子邮件，然后按下按钮时，将其添加到一个对象中，并显示添加的新电子邮件和已发送的电子邮件。我的问题是新的电子邮件取代了我原来的电子邮件，它后面没有添加。怎么解决呢？
这是我的代码
enter code here
<html>
<head>
<script src="config/jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript">
var obj = {};
$(document).ready(function(){
$('#agr').click(function(){
var correo_val = $('#correoe').val();
var estrc = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(correo_val == ''){
alert("Debes agregar un correo");
}
else if(!estrc.test(correo_val)){
alert("Correo no valido");
}
else if(estrc.test(correo_val)){
alert("Correo agregado exitosamente");
if(!obj.hasOwnProperty(correo_val)){
arr = [];
arr.push(correo_val);
// obj=arr;
obj2 = {};
obj2 = arr;
obj = obj2;
}else{
obj2 = {};
obj = obj2;
}
alert(obj);
$("#listac").html(obj);
}
});
});
</script>
</head>
<body>
<div>
<table style='margin-top:10%' align='center'>
<tr> <td> Ingresar correo electrónico </td> </tr>
<tr> <td> <input type='text' name='correoe' id='correoe'> </td> </tr>
<tr> <td> <input type='button' name='agregar' value='agregar' id='agr'> </td> </tr>
</table>
</div>
<div style="background:#FFFFFF;border:0" class="box" id="LCriterios">
<h1><span id="field"></span><span style="float:right;"></span></h1>
<!--<label><span>Tipo de operación</b></span><select class='opSelect' name='selOp' id='selOp'></select></label>
<label id='selCriterio'></label>
<label style="height: 30px;"><input type="button" class="btAgregar" value="Agregar" id="btn_add"/></label>-->
<label id="label12">Correos electrónicos </label>
<div id='listac'></div>
</div>
</body>
最佳答案
我刚刚做了一个 Fiddle只需对您的 JavaScript 进行一项调整 -
if(!obj.hasOwnProperty(correo_val)){
arr = []; // <-- move this to the first line where
// you already have var obj = {};
arr.push(correo_val);
...
将用于存储此 if() 子句中有效电子邮件的 arr = []; 移动到代码的第一行，您还声明了 var obj = {};。否则，每次添加另一封电子邮件之前，arr = []; 都将是一个空数组，并且始终只有一个元素(添加的最后一封电子邮件)。
关于javascript - 动态向 JavaScript 对象添加新元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26567156/