Question

HTML代码

echo  "<ul id='sub'>";
if($Set == null){ 
echo '<li class="BlankSeat" ></li>';
}

根据行使用价格

 elseif($name=='PINK'){
echo '<li class="pink" price="10" title="Row'.$val1.'" name="'.val2.'" 
value="'.$val3.'"></li>';
}

对此行使用不同的价格

else{
 echo '<li class="orange" price="15" title="Row'.$val1.'" name="'.$val2.'" 
 value="'.$val3.'"></li>';
 }
echo "</ul>";   
}
echo '</div>';
}

jquery代码

var total=0;
var counter = 0;    
var limit=5;
var price=0;
$('li').click(function(e) {
var Lastliclicked = $(this).attr('id');
var price=$(this).attr('price');
if($(this).hasClass('pink')|| $(this).hasClass('yellow') || $(this).hasClass('orange'))
{
if(counter < limit-1)
{

计算li

中点击的食物数量

counter++;
$(this).addClass('Booked').removeClass(Lastliclicked);
document.getElementById("demoCount").innerHTML=counter;
}
else
{

删除未点击的元素数量

$(this).addClass(Lastliclicked).removeClass('Booked');
counter --;
document.getElementById("demoCount").innerHTML=counter;
}

获得总数

if(counter < limit)
{
var total= price * counter;
document.getElementById('demoPrice').innerHTML = '$' + total;}});

Answer 1

var total=0;
var counter = 0;    
var limit=5;
var price=0;
  $('li').click(function(e) {
    var Lastliclicked = $(this).attr('id');
    var price=$(this).attr('price');
    if($(this).hasClass('pink')|| $(this).hasClass('yellow') || $(this).hasClass('orange'))
   {
      if(counter < limit-1)
      {
          counter++;
          $(this).addClass('Booked').removeClass(Lastliclicked);
          document.getElementById("demoCount").innerHTML=counter;
      }
      else
      {
         $(this).addClass(Lastliclicked).removeClass('Booked');
         counter --;
         $('#demoCount').val(counter);
      }
      if(counter < limit)
      {
         /*alert(price)*/
         var total= parseFloat(price * counter);
         document.getElementById('demoPrice').innerHTML = '$' + total;
      }
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><ul id='sub'>
<li class="BlankSeat" >BlankSeat</li>
<li class="pink" price="10" title="Row Pink'" name="Pink" 
value="Pink">Pink</li>
<li class="orange" price="15" title="Row orange" name="orange" 
 value="orange">orange</li>
 </ul>  
</div>
<div id="demoCount"></div>
<div id="demoPrice"></div>

请试试这个

var total= parseFloat(price * counter);

Answer 2

您应该将li标签中的“价格”替换为数据价格，例如：

else{
echo '<li class="orange" data-price="15" title="Row'.$val1.'" 
name="'.$val2.'" 
value="'.$val3.'"></li>';
}
echo "</ul>";   
}
echo '</div>';

}

然后在jquery

$("li").click(function(){
var price = $(this).data('price');
})

或

$("li").click(function(){
var price = $(this).attr('data-price');})

如何在jquery中获得价格并加上总数

2 个答案: