Question

我目前正在使用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>");
    }
});

Answer 1

考虑在列表中追加以后可以查找和删除的实际元素，而不是纯文本

追加：

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

卸下：

$("#seat_"+$(this).attr('id')).remove();

Answer 2

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

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

第三点需要注意的是，jQuery有一个名为hasClass的非常有用的方法，请使用它！

第四个也是最后一个，这是一个应该运行的代码的改进版本：

seats

另外，我会考虑删除$('.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')) ); });和unavailable。没有这两个类且没有available的元素将处于“默认”状态，在您的应用程序中没有任何意义。考虑修改为selected和selected。保留已经被占用的座位，最终用户当前选择的座位和没有任何一个类别的那些元素将处于默认状态：任何人都可以免费使用。

如何删除javascript中的附加内容？

2 个答案: