0

現在、javascript、html、css を使用して Web ページをデザインしています。このページは、ユーザーが座席を選択および選択解除できる座席予約シートです。ユーザーが座席を選択したときにページに座席の 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()。これは、ユーザーにメッセージを投稿するための非常に悪い習慣です。別のアプローチを検討してください (必要に応じて、正しい方向を示すことができます。

2 番目に注意すべきことはremove()、jQuery の要素に対して機能することです。現在選択されている結果セットまたは現在の結果セットに基づく新しい結果セットのいずれか$('#seats').remove('.reserved')を削除し、最初の結果セットで見つかったクラスを持つreserved要素 (id を持つ要素seats) を削除します。

3 つ目の注意点は、jQuery にはhasClassという非常に便利なメソッドがあることです。それを使用してください。

4 つ目と最後に、動作するコードの改良版を次に示します。

$('.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ます。これらの 2 つのクラスと を持たない要素selectedは、アプリケーションで意味を持たない「デフォルト」状態になります。と に改造することを検討しselectedてくださいreserved。Reserved は既に取得済みのシートであり、selected はエンド ユーザーによって現在選択されているシートであり、いずれのクラスも持たない要素はデフォルトの状態であり、誰でも自由に取得できます。

于 2013-02-19T17:46:54.160 に答える