1

ボタンをクリックすると座席が選択され、背景色が緑に変わり、同時にボタンの値がテキストフィールドに追加され、それに応じてトグルされるプログラムをjavascriptを使用して作成しています。

問題: 配列を使用してすべての値をテキスト フィールドに追加していますが、これは成功していますが、トグル中に特定のクリック ボタンの値を配列から減算することはできません。

このページは ajax-page ロードから来ているため、ここでは jquery を使用できません

ここにページのスクリーンショットがあります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 に答える