Question

这是一个jQuery函数，它应该累积一个名为p1或p2的变量，具体取决于所点击的td的类。然后，应根据类别将其附加到段落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>

Answer 1

您可以测试此代码：

$(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/

替换jQuery中<p>中的内容</p>

1 个答案: