0

我目前正在使用 javascript、html 和 css 设计网页。该页面是一个座位预订座位，允许用户选择和取消选择座位。当用户选择座位时，我设法让页面显示座位的 id，但是如果用户取消选择座位，我在尝试从显示中删除 id 时遇到问题。

下面是javascript代码

$('.available, .unavailable, .selected').click(function(){
    var ID = $(this).attr('class');
    if (ID == 'n unavailable' || ID == 'p unavailable') {
        alert ('Seat is already booked. Please select another seat.');
    }
    else if (ID == 'n selected' || ID == 'p selected') {
        alert ('You have now unselected this seat.');
        $(this).html('<img src = "free.gif"/>');
        $(this).removeClass('selected').addClass('available');
        y--;
        $("#seats").html("Number of seats selected: " + y);
        $("#list").remove($(this).attr('id'));
    }
    else {
        alert ('You have now reserved this seat. You can unselect it by clicking the seat again.');
        $(this).html('<img src = "selected.gif"/>');
        $(this).removeClass('available').addClass('selected');
        y++;
        $("#seats").html("Number of seats selected: " + y);
        $("#list").append($(this).attr('id') + "</br>");
    }
});
4

2 回答 2

1

考虑将一个实际元素附加到列表中，以便以后查找和删除，而不是纯文本

附加：

var appendId = $(this).attr('id') 
$("#list").append("<div id='seat_"+appendId +"'>" + appendId + "</div>");

删除：

$("#seat_"+$(this).attr('id')).remove();
于 2013-02-19T17:43:13.467 回答
0

首先要注意的是您正在使用alert()，这是向用户发布消息的非常糟糕的做法。考虑一种不同的方法（如果你愿意，我可以提示正确的方向。

要注意的第二件事是它remove()适用于 jQuery 中的元素。它删除当前选定的结果集或基于当前结果集的新结果集$('#seats').remove('.reserved')，将删除具有reserved在第一个结果集中找到的类的元素（具有 id 的元素seats）。

第三点，要注意的是 jQuery 有一个相当有用的方法叫做hasClass，使用它！

第四也是最后，这是您的代码的改进版本，应该可以工作：

$('.available, .unavailable, .selected').click(function(){
    var $this = $(this);

    if ($this.hasClass('unavailable')) {
        alert ('Seat is already booked. Please select another seat.');
        return;
    }

    if ($this.hasClass('selected')) {
        alert ('You have now unselected this seat.');
        $this
            .html('<img src = "free.gif"/>')
            .removeClass('selected')
            .addClass('available')
        ;
        y--;
        $("#seats").html("Number of seats selected: " + y);
        $('#reserved-'+$this.attr('id')).remove();
        return;
    }

    alert ('You have now reserved this seat. You can unselect it by clicking the seat again.');
    $this
        .html('<img src = "selected.gif"/>')
        .removeClass('available')
        .addClass('selected')
    ;
    y++;
    $("#seats").html("Number of seats selected: " + y);
    $("#list").append(
        $('<p/>')
            .attr('id','reserved-'+$this.attr('id'))
            .html($this.attr('id'))
    );
});

另外我会考虑删除unavailableand available。没有这两个类且没有selected, 的元素将处于“默认”状态，在您的应用程序中没有任何意义。考虑修改为selected和reserved。Reserved 将已被占用，selected 将是最终用户当前选择的座位，并且没有任何类别的元素将处于默认状态：任何人都可以免费使用。

于 2013-02-19T17:46:54.160 回答