1

我正在使用 javascript 创建一个程序，同时单击按钮它将选择一个座位并将其背景颜色更改为绿色，同时按钮值将被添加到文本字段并相应地切换。

问题：我正在使用数组将所有值添加到文本字段，这很成功，但在切换期间它无法从数组中减去特定的单击按钮值。

在这里我无法使用 jquery，因为此页面来自 ajax 页面加载

这是页面截图http://i49.tinypic.com/206obo2.png

// JavaScript Document

var Cur_id;
var Cur_val;

function setId(id, value) {
    Cur_id = id;
    Cur_val = value;
    var SeatVal = document.getElementById(id);
    if (SeatVal.style.backgroundImage == "") {
        SeatVal.style.backgroundImage = "url(\'themes/frontend/images/greenseat.png\')";
        var txbtElementSeat = new Array(document.getElementById("selectedseat").value += Cur_val + ",");
    } else if (SeatVal.style.backgroundImage == 'url("themes/frontend/images/greenseat.png")') {
        SeatVal.style.backgroundImage = "url(\'themes/frontend/images/seat.png\')";
        var txbtElementSeatnbg = document.getElementById("selectedseat").value;
        removeSeat(txbtElementSeatnbg, Cur_val);

        function removeSeat(txbtElementSeatnbg, value) {
            for (var i = 0; i <= txbtElementSeatnbg.length; i++) {
                if (txbtElementSeatnbg[i] == value) {
                    txbtElementSeatnbg.splice(i, 1);
                    break;
                }
            }
        }
    } else if (SeatVal.style.backgroundImage == 'url("themes/frontend/images/seat.png")') {
        SeatVal.style.backgroundImage = "url(\'themes/frontend/images/greenseat.png\')";
        var txbtElementseatnb = document.getElementById("selectedseat").value += Cur_val + ",";
    }
}
4

2 回答 2

2

您的主要问题似乎是您尝试将数组保存到文本字段中。这实际上会起作用，但会将数组转换为字符串表示形式。

var a = document.getElementById('selectedseat').value;因此将数组的字符串表示加载到变量“a”中，而不是数组本身！

为什么不在外部上下文中使用变量（而不是 setId() 的局部函数范围！）来保存数组？也许有点像这样：

// Create a variable for the array!
var selectedSeats = new Array();

// Build a function that will update the textfield.
// Call this, whenever the array gets changed!
function updateListOfSelectedSeats() {
    document.getElementById('selectedseat').value = selectedSeats.join(',');
}

// Removes a seat from the list of selected seats
function removeSeatFromList(seat) {
    for (var i = 0; i < selectedSeats.length; i++) {
        if (selectedSeats[i] == seat) {
            selectedSeats.splice(i, 1);
            updateListOfSelectedSeats();
            break;
        }
    }
}

// Now the function that reacts to clicks on a seat
function setId(id, value) {
    var Seat = document.getElementById(id);

    switch (Seat.style.backgroundImage) {
        case 'url("themes/frontend/images/greenseat.png")':
            // Seat is already selected and needs to be deselected
            Seat.style.backgroundImage = 'url("themes/frontend/images/seat.png")';
            removeSeatFromList(value);
            break;

        case '':
        case 'url("themes/frontend/images/seat.png")':
            // Seat is empty, select it!
            Seat.style.backgroundImage = 'url("themes/frontend/images/greenseat.png")';
            selectedSeats.push(value);
            updateListOfSelectedSeats();
            break;
    }
}
于 2012-12-08T14:41:20.217 回答
0

要从列表中删除座位，请使用此

//remove seat from list
function removeSeat(seatListElm, seatValue) {
    var arr=seatListElm.value.split(',');

     var p=arr.indexOf(seatValue);
     if(p!=-1){
         arr.splice(p, 1);
         seatListElm.value=arr.join(',');
     }
}

seatListElm 将是持有"b5,c7,d5,c2"
seatValue 的元素将是这样的"c7"

工作演示代码：JSFIDDLE

JSFiddle 示例

于 2012-12-08T15:07:18.843 回答