Javascript 数组";有时";未定义
我正在尝试实现一个按钮,该按钮将从用户选择的事件集中删除事件。为了排除故障,现在我在页面中硬编码了5个事件,但最终它们是从localStorage调用的。“删除”按钮用于删除本地存储和页面中的元素。我的问题是,如果没有按顺序单击“删除”按钮,它会抛出一个错误。非常感谢您的帮助。要查看错误,请打开控制台。这是一把小提琴: 下面是代码的简短版本:Javascript 数组";有时";未定义,javascript,arrays,outerhtml,Javascript,Arrays,Outerhtml,我正在尝试实现一个按钮,该按钮将从用户选择的事件集中删除事件。为了排除故障,现在我在页面中硬编码了5个事件,但最终它们是从localStorage调用的。“删除”按钮用于删除本地存储和页面中的元素。我的问题是,如果没有按顺序单击“删除”按钮,它会抛出一个错误。非常感谢您的帮助。要查看错误,请打开控制台。这是一把小提琴: 下面是代码的简短版本: <div id="result"> <div class="10am target-stage stage-only satur
<div id="result">
<div class="10am target-stage stage-only saturday eventer" id="row0" rel="0">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">10:30 a.m.</td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 1</span></p></span>
<span class="info-body"><b>Anna Dewdney, </b>Author of<em> NELLY GNU AND DADDY TOO</em></span>
<span class="info-btn"><p class="selctor" rel="0"><span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
<span class="mapit" ><a href="#"><b>map</b></a></span>
<span class="premove hidden" rel="0"><a href="#">Remove</a></span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row1" rel="1">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:00 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span></p></span>
<span class="info-body"><b>Yuyi Morales, </b>Author of<em> NIÑO WRESTLES THE WORLD</em></span>
<span class="info-btn"><p class="selctor" rel="1"> <span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
<span class="mapit" > <a href="#"><b>map</b></a></span>
<span class="premove hidden" rel="1"><a href="#">Remove</a></span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row2" rel="2">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:30 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 4</span></p></span>
<span class="info-body"><em>Scooby-Doo and the Carnival Creep,</em> presented by <b>Warner Bros. Consumer Products</b></span>
<span class="info-btn"><p class="selctor" rel="2"> <span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
<span class="mapit"><a href="#"><b>map</b></a></span>
<span class="premove hidden" rel="2"><a href="#">Remove</a></span></p></span></td>
</tr>
</table>
</div></div>
<script>
$(document).ready(function(){
var storaged = Object.keys(localStorage);
var storageLength = storaged.length;
for (var i=0; i<storageLength; i++)
{
var el = $(localStorage[storaged[i]]);
$("#result").append(el);
}
$("#buttn2").click(function(){
localStorage.clear();
$("#result").html('');
console.log("Storage is cleared");
});
$(".premove").click(function (event) {
event.preventDefault();
var a=$(this).attr("rel");
console.log(a);
var eventsArray = document.getElementsByClassName("eventer");
var eventSelctd=(eventsArray[a]).outerHTML;
localStorage.removeItem("schedule " + a, eventSelctd);
eventsArray[a].outerHTML="";
});
});
</script>
上午10:30。
四月份的星期六。2015年12月18日;s舞台
签名区1
安娜·杜德尼,《耐莉·格努和爸爸》的作者
上午11点。
四月份的星期六。2015年12月18日;s期
《尼诺与世界搏斗》的作者尤伊·莫拉莱斯
上午11:30。
四月份的星期六。2015年12月18日;s舞台
签名区4
由华纳兄弟消费品公司主办的《史酷比·杜》和《狂欢爬行》
$(文档).ready(函数(){
var storaged=Object.keys(localStorage);
var storageLength=storaged.length;
对于(var i=0;i您正在将rel=(number)
添加到列表中的每个项目,并使用该数字在document.getElementsByClassName(“eventer”)定义的数组中获取其引用
-每次删除项目时,数组都会变短,因为删除的项目现在已不存在,并且您每次单击“删除”按钮都会重新定义它。最终,您会开始查找项目4,但它不存在,因为列表中只存在两个项目
另一种方法是查找最靠近按钮的元素并将其删除
var eventSelected = $(this).closest('.eventer');
localStorage.removeItem("schedule " + a, eventSelected[0]);
eventSelected.remove();
这是因为rel
属性是硬编码的。例如,当您删除项目2时,项目3和4现在是项目2和3,因此如果您删除项目4并查找数组中的第4个元素,它就不存在了。您需要重新思考此逻辑。要么动态更新rel
属性,要么使用不同的逻辑确定单击了哪一个。更好的方法是,研究敲除或角度以及它们提供的模板选项。有比您的rel
方法简单得多的遍历方法。查看jQuery closest()方法感谢您的所有解释。lemieuxster您的代码运行正常,谢谢。我使用另一页上的rel逻辑将事件添加到localStorage,因此我认为在这里反转该方法可行,显然不行。@James我正在为这个项目探索Angular,正如我们所说的,我需要为现有的结构做好这项工作,以防万一管理层不喜欢我有棱角的建议:)再次感谢