我的jQuery代码是否有任何语法错误

时间:2012-10-04 11:26:21

标签: jquery

是否存在语法错误,导致它目前无法正常工作?但是,如果评论.click(检查(座位[i]));并取消注释.click(deleteBooking); &安培; .toggle(appendBooking,deleteBooking);

提前致谢。 欢呼声。

$(document).ready(function() {
function Seat(seat_xcoord, seat_ycoord, row_name, row_label, column_name, column_label){
this.seat_xcoord = seat_xcoord;
this.seat_ycoord = seat_ycoord;
this.row_name = row_name;
this.row_label = row_label;
this.column_name = column_name;
this.column_label = column_label;
this.state = false;

this.getState = function(){
return this.state;
}

this.setFstate = function(){
this.state = true;
}

this.setTstate = function(){
this.state = false;
}
}

function check(Seat){
if(Seat.getState==false){
appendBooking();
Seat.setTstate();
}else{
deleteBooking();
Seat.setFstate();
}
} 

var seats = new Array();    

var i =0;   
var price = 0;

$.get('seating_plan.xml', function(d){
$(d).find('seat').each(function(){
    var $seat = $(this);
    var seat_xcoord = $seat.attr("seat_xcoord");
    var seat_ycoord = $seat.attr("seat_ycoord");
    var row_name = $seat.attr("row_name");
    var row_label = $seat.attr("row_label");
    var column_name = $seat.attr("column_name");
    var column_label = $seat.attr("column_label");          
    var leftValue = seat_xcoord*20;
    var bottomValue = seat_ycoord*20;

    seats[i]= new Seat(seat_xcoord, seat_ycoord, row_name, row_label, column_name,   column_label);

    var $ticketRowDiv = $('<div id="ticket'+i+'"></div>'); //One row of ticket details
    var $ticketInfoDiv = $('<div class="ticket-item">'+row_name+column_name+'</div><div class="ticket-item">$15.50</div>');

    function deleteBooking(){
        $seatdiv.css("background-color","#42de18"); //change seat color back to green
        $ticketRowDiv.hide(); //hide the ticket details
        price = price-15.50; 
        $('#price h1').html('$'+price); //display total price
    }

    function appendBooking(){
        $seatdiv.css("background-color","#f64848"); //change seat color to red
        $('#details').append($ticketRowDiv); //add ticket details to sidebar
        $ticketRowDiv.show(); 
        price =price+15.50; 
        $('#price h1').html('$'+price);//display total price
        check(seats[i]);
    }

    function seatHover(){
        $(this).addClass("seat-hover");
    }

    function seatUnHover(){
        $(this).removeClass("seat-hover");
    }

    var $dltDiv = $('<div id="dlt_seat'+i+'" class="ticket-item"><a href="#">delete</a></div>')
                //.click(deleteBooking);
                .click(check(seats[i]));

    $ticketRowDiv.append($ticketInfoDiv); //append "seat No." and "sub Total" to a ticket details row
    $ticketRowDiv.append($dltDiv); //append "delete" link to a ticket details row

    var $seatdiv = $('<div id = "seat'+i+'" class="seat"></div>')
                .css({left: leftValue + 'px', bottom: bottomValue + 'px'})   //define seat location in seating map
                .hover(seatHover,seatUnHover)
                .click(check(seats[i]));
                //.toggle(appendBooking, deleteBooking); 

    $('#canvas').append($seatdiv); //add a seat to seating map
    i++;
});
}); 

});

1 个答案:

答案 0 :(得分:1)

您正在绑定函数check的返回值,而不是函数,函数不返回任何内容。

绑定一个调用check函数的匿名函数:

.click(function(){ check(seats[i]); });

但是,您需要在代码周围创建一个闭包来捕获i的值而不是变量本身,因为变量在事件发生之前发生了变化:

var $dltDiv = (function(i) {
  return $('<div id="dlt_seat'+i+'" class="ticket-item"><a href="#">delete</a></div>').click(function(){ check(seats[i]); });
})(i);