我项目的链接在这里: http://codepen.io/xruizify/pen/aJKpNJ
var reservedTimes = [];
$(function() {
var idx = reservedTimes.indexOf(currentSelection);
$("td").click(function() {
var selectedTime = $(this).parent().prop('className');
var weekDay = $(this).prop('className').split(" ")[0];
var currentSelection = weekDay + "and" + selectedTime;
//var idx = reservedItems.indexOf(currentSelection); It didn't work here
if ( $(this).is(".reserved") ) {
} else if($(this).is(".active")) {
$(this).removeClass("active");
//var idx = reservedItems.indexOf(currentSelection); I get 'undefined'
document.getElementById("currentIDX").innerHTML = idx;
//The comment below is what I want to do in the future once idx works
//reservedTimes.splice(idx,1);
printTimes();
} else{
$(this).addClass("active");
document.getElementById("mainHeader").innerHTML = selectedTime;
document.getElementById("currentSelection").innerHTML = currentSelection;
document.getElementById("currentIDX").innerHTML = idx;
document.getElementById("secondHeader").innerHTML = weekDay;
reservedTimes.push(currentSelection);
printTimes();
}
});
});
function makeReservation() {
$(".active").addClass("reserved");
$(".active").removeClass("active");
printTimes();
}
function printTimes() {
document.getElementById("timeTitle").innerHTML = reservedTimes;
}
基本上,您单击表格中的单元格,它会生成一个特殊的“代码”并将其添加到数组中。表中的每个单元格始终使用相同的唯一代码,并且不会更改。我希望能够获取它,在数组中获取它的indexOf()值,并在第二次单击它时将其删除。无论我在哪里声明idx变量,它都行不通,我无法想出这个。
答案 0 :(得分:1)
它不起作用,因为您试图在indexOf
上调用不存在的reservedItems
;我认为你的意思是reservedTimes
这是你要推送的阵列,然后你就可以按原样拨打splice
。
这适用于您的codepen(固定http://codepen.io/anon/pen/XMYpxa):
var reservedTimes = [];
$(function() {
$("td").click(function() {
var selectedTime = $(this).parent().prop('className');
var weekDay = $(this).prop('className').split(" ")[0];
var currentSelection = weekDay + "and" + selectedTime;
var idx = reservedTimes.indexOf(currentSelection);
if ( $(this).is(".reserved") ) {
} else if($(this).is(".active")) {
$(this).removeClass("active");
document.getElementById("currentIDX").innerHTML = idx;
reservedTimes.splice(idx,1);
printTimes();
} else{
$(this).addClass("active");
document.getElementById("mainHeader").innerHTML = selectedTime;
document.getElementById("currentSelection").innerHTML = currentSelection;
document.getElementById("currentIDX").innerHTML = idx;
document.getElementById("secondHeader").innerHTML = weekDay;
reservedTimes.push(currentSelection);
printTimes();
}
});
});
function makeReservation() {
$(".active").addClass("reserved");
$(".active").removeClass("active");
printTimes();
}
function printTimes(){
document.getElementById("timeTitle").innerHTML = reservedTimes;
}