-1

这是一个 jQuery 函数，它应该根据单击的 td 的类累积一个名为 p1 或 p2 的变量。然后它应该将其附加到段落中cheap并premium取决于类。写入类的函数在底部，尽管我觉得这可能是不正确的，因为段落中的变量可能不会与变量同时更新。此外，底部功能实际上并没有做任何事情。

$(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 回答