-1

これは、クリックされた td のクラスに応じて p1 または p2 と呼ばれる変数を蓄積する jQuery 関数です。次に、これを段落に追加し、クラスcheapにpremium応じて追加する必要があります。クラスに書き込む関数は一番下にありますが、段落内の変数は変数と同時に更新されない可能性があるため、これは間違っている可能性があると思います。また、bottom 関数は実際には何もしません。

$(document).ready(function () {
   $('td img').click(function () {
     if ($(this).parent().hasClass('x')) {
     alert("Seat " + ($(this).parent().attr("id")) + " is taken");
        } else if ($(this).parent().hasClass('selected')){
     $(this).attr('src', 'images/a.gif');
     $(this).parent().removeClass('selected');
 var z = $(this).parent().attr('id');
 $('#'+z+'1').remove();
     return false;
    } else {
        if ($(this).parent().hasClass('n')){
    p1=p1+1;                
    } else if ($(this).parent().hasClass('p')){
    p2=p2+1;
    }
$(this).attr('src', 'images/c.gif');
    $(this).parent().addClass('selected');
    alert($(this).parent().attr("class"));
var z = $(this).parent().attr('id');
$('<p>').attr('id', z+'1' ).text(z).appendTo('#order');
    return false;
       };
    });
  });

$(document).ready(function(){
$(p1' Standard seats= £'(p1*10)).appendTo('#cheap');
$(p2' Premium seats= £'(p2*20)).appendTo('#premium');
});

数学演算子は機能しているように見えますが、私が探しているのは、$(p1' Standard seats= £'(p1*10)).appendTo('#cheap');毎回新しい段落を追加せずに追加または同等のプレミアムを追加する方法です。つまり、上書きなどです。replaceWith()どちらも機能していないようです。

HTML が追加されました:

<!doctype html>
<html>
<head><title>Seat Booking</title>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='hall.js'></script>
<link rel='stylesheet' href='hall.css'/>
</head>
<body>
<div id='content'></div>
<h1>Seat Booking</h1>
<div id='details'>
<div id='what'></div>
<div id='when'></div>
<div id='where'></div>
</div>
<div id='plan'>
<table>
  <tr>
   <td class='n' id='a1'><img src='images/a.gif'/></td>
   <td class='n' id='a2'><img src='images/a.gif'/></td>
   <td class='n' id='a3'><img src='images/a.gif'/></td>
   <td class='n' id='a4'><img src='images/a.gif'/></td>
   <td></td>
   <td class='n' id='a6'><img src='images/a.gif'/></td>
   <td class='n' id='a7'><img src='images/a.gif'/></td>
   <td class='n' id='a8'><img src='images/a.gif'/></td>
   <td class='n' id='a9'><img src='images/a.gif'/></td>
 </tr>
 <tr>
   <td class='n' id='b1'><img src='images/a.gif'/></td>
   <td class='n' id='b2'><img src='images/a.gif'/></td>
   <td class='n' id='b3'><img src='images/1.gif'/></td>
   <td class='n' id='b4'><img src='images/1.gif'/></td>
   <td></td>
   <td class='n' id='b6'><img src='images/1.gif'/></td>
   <td class='n' id='b7'><img src='images/a.gif'/></td>
   <td class='n' id='b8'><img src='images/a.gif'/></td>
   <td class='n' id='b9'><img src='images/a.gif'/></td>
 </tr>
 <tr>
   <td class='n' id='c1'><img src='images/1.gif'/></td>
   <td class='n' id='c2'><img src='images/1.gif'/></td>
   <td class='n' id='c3'><img src='images/a.gif'/></td>
   <td class='n' id='c4'><img src='images/a.gif'/></td>
   <td></td>
   <td class='n' id='c6'><img src='images/1.gif'/></td>
   <td class='n' id='c7'><img src='images/1.gif'/></td>
   <td class='n' id='C8'><img src='images/a.gif'/></td>
   <td class='n' id='C9'><img src='images/a.gif'/></td>
 </tr>
 <tr>
   <td class='n' id='d1'><img src='images/1.gif'/></td>
   <td class='n' id='d2'><img src='images/1.gif'/></td>
   <td class='n' id='d3'><img src='images/1.gif'/></td>
   <td class='n' id='d4'><img src='images/1.gif'/></td>
   <td></td>
   <td class='n' id='d6'><img src='images/1.gif'/></td>
   <td class='n' id='d7'><img src='images/1.gif'/></td>
   <td class='n' id='d8'><img src='images/1.gif'/></td>
   <td class='n' id='d9'><img src='images/1.gif'/></td>
 </tr>
 <tr>
   <td class='p' id='e1'><img src='images/1.gif'/></td>
   <td class='p' id='e2'><img src='images/1.gif'/></td>
   <td class='p' id='e3'><img src='images/1.gif'/></td>
   <td class='p' id='e4'><img src='images/1.gif'/></td>
   <td></td>
   <td class='p' id='e6'><img src='images/a.gif'/></td>
   <td class='p' id='e7'><img src='images/a.gif'/></td>
   <td class='p' id='e8'><img src='images/1.gif'/></td>
   <td class='p' id='e9'><img src='images/1.gif'/></td>
 </tr>
</table>
</div>
<div id='order'>
<h2>Order Summary:</h2>
</div>
<div id='subtotal'>
<h2>Total Price</h2>
<p id="cheap">hhh</p>
<p id="premium">jjj</p>
</div>
</body>
</html>
4

1 に答える 1

0

このコードをテストできますか？

$(document).ready(function () {
var p1=0,
    p2=0;
$('#cheap').text(p1 + ' Standard seats= £' + (p1*10));
$('#premium').text(p2 + ' Premium seats= £' + (p2*20));
$('td img').click(function () {
    if ($(this).parent().hasClass('x')) {
        alert("Seat " + ($(this).parent().attr("id")) + " is taken");
    } else if ($(this).parent().hasClass('selected')){
        $(this).attr('src', 'images/a.gif');
        $(this).parent().removeClass('selected');
        var z = $(this).parent().attr('id');
        if ($(this).parent().hasClass('n')){
            p1--;                
        } else if ($(this).parent().hasClass('p')){
            p2--;
        }
        $('#'+z+'1').remove();
    } else {
        if ($(this).parent().hasClass('n')){
            p1++;                
        } else if ($(this).parent().hasClass('p')){
            p2++;
        }
        $(this).attr('src', 'images/c.gif');
        $(this).parent().addClass('selected');
        alert($(this).parent().attr("class"));
        var z = $(this).parent().attr('id');
        $('#order').append('<p id="'+z+'1">'+z+'</p>');            
    };
    $('#cheap').text(p1 + ' Standard seats= £' + (p1*10));
    $('#premium').text(p2 + ' Premium seats= £' + (p2*20));
    return false;
});
});

編集：Aには、選択した座席の数（格安およびプレミアム）を保存するためのいくつかのグローバル変数がありました。

動き

$('#cheap').text(p1 + ' Standard seats= £' + (p1*10));
        $('#premium').text(p2 + ' Premium seats= £' + (p2*20));

クリックイベントで

座席が選択されていないときにこれがありました：

if ($(this).parent().hasClass('n')){
            p1--;                
        } else if ($(this).parent().hasClass('p')){
            p2--;
        }

編集2： インタラクティブコード：

http://jsfiddle.net/kdQmq/3/

于 2013-03-06T22:11:50.427 に答える