数组“有时”未定义
Array "sometimes" not defined
我正在尝试实现一个按钮,该按钮将从用户选择的事件集中删除事件。为了立即进行故障排除,我在页面中硬编码了 5 个事件,但最终它们是从 localStorage 调用的。删除按钮应该从本地存储以及页面中删除元素。我的问题是,当"删除"按钮未按顺序单击时,它会引发错误。感谢任何和所有的帮助。要查看错误,请打开控制台。这里有一个小提琴:http://jsfiddle.net/roob/65j6ktnL/
下面是代码的较短版本:
<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>
您将rel=(number)
添加到列表中的每个项目,并使用该数字在document.getElementsByClassName("eventer")
定义的数组中获取其引用 - 每次删除项目时,数组都会变短,因为删除的项目现在已经消失,并且每次单击删除按钮都会重新定义它。发生的情况是,您最终开始查找项目 #4 并且它不存在,因为列表中仅存在两个项目。
另一种方法是查找最靠近按钮的元素并将其删除。
var eventSelected = $(this).closest('.eventer');
localStorage.removeItem("schedule " + a, eventSelected[0]);
eventSelected.remove();
相关文章:
- 为什么“;未定义的“;在JavaScript中结束循环
- 要求未定义JS回调参数
- 如何检查管道中未定义的项目
- TypeError:无法读取属性'推'未定义的JavaScript
- $window.ga在AngularJS事件中未定义
- 未捕获的TypeError无法读取未定义的属性socialsharing
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 无法获取属性'selectedIndex'的未定义引用或null引用
- 如何消除代码中的未定义和其他问题
- 未捕获的ReferenceError:$未定义
- this.router在AngularJS 2中未定义
- 未捕获的类型错误:无法读取属性'删除'的未定义
- 节点fs.stat名称未定义
- 尝试在PHP中回显输入文本时出现未定义的索引错误
- 数组“有时”未定义
- 为什么Javascript中未定义的变量有时会计算为false,有时还会抛出未捕获的ReferenceError
- 如何筛选有时未定义的值
- 谷歌api javascript客户端有时工作,有时是未定义的
- Angular UI-Router: $state.电流有时是未定义的
- 为什么“this”有时在对象文字中未定义