2017-03-14 8 views
0

私はjQueryの初心者ですので、私は試しに行って経験豊富なヘルプをしてください。 jQuery - recalculateTotal - クリックイベントでの価格の加算と減算

この

は、コードの一部です

click: function() { //Click event 
    if (this.status() == 'available') { //optional seat 
    var maxSeats = 3; 
    var ms = sc.find('selected').length; 
    //alert(ms); 
    if (ms < maxSeats) { 

       price = this.settings.data.price; 

       /* 
        $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>') 
        .attr('id', 'cart-item-'+this.settings.id) 
        .attr('value', (this.settings.row+1)+'_'+this.settings.label) 
        .data('seatId', this.settings.id) 
        .appendTo($cart); 
       */ 

        $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>') 
        .attr('id', 'cart-item-'+this.settings.id) 
        .attr('value', this.settings.id) 
        .attr('alt', price) 
        .data('seatId', this.settings.id) 
        .appendTo($cart); 

       $counter.text(sc.find('selected').length+1); 
       $counter.attr('value', sc.find('selected').length+1); 

       $total.text(recalculateTotal(sc)); 
       $total.attr('value', recalculateTotal(sc)); 

       return 'selected'; 
      } 
       alert('You can only choose '+ maxSeats + ' seats.'); 
       return 'available'; 

     } else if (this.status() == 'selected') { //Checked 

       //Update Number 
       $counter.text(sc.find('selected').length-1); 
       $counter.attr('value', sc.find('selected').length-1); 
       //update totalnum 
       $total.text(recalculateTotal(sc)); 
       $total.attr('value', recalculateTotal(sc)); 

       //Delete reservation 
       $('#cart-item-'+this.settings.id).remove(); 
       //optional 
       return 'available'; 

     } else if (this.status() == 'unavailable') { //sold 
      return 'unavailable'; 

     } else { 
      return this.style(); 
     } 
    } 
}); 

特に問題は、この関数はクリックごとに合計金額を計算し、実際に総

 $total.text(recalculateTotal(sc)); 
     $total.attr('value', recalculateTotal(sc)); 

の再計算に関連する部分であり、地図上に表示され、アイテム(選択解除)が再度クリックされたときに再計算されます。 アイテムを選択するときにクリックすると、関数は合計を正しく計算します。アイテムを再度クリックして選択を解除すると、最初の選択解除(またはクリック)で、その値は減算されません。

もっと具体的に例を挙げてください: 10ユーロの価格で3つのアイテムを選択すると、クリックごとに合計(10 + 10 + 10 = 30)が正しく更新されます。 3つの要素の選択を解除すると、最初のクリックを行うと合計が更新されず、次のクリック(選択解除)では合計が更新され、= 0ではなく10が返されます。

したがって、要素が選択されていますが、合計は10です!

私はSOLUTION

がちょうど

  //Delete reservation 
      $('#cart-item-'+this.settings.id).remove(); 

を上に移動されている任意の提案はここ

+0

です。しかし、チェックボックスではなく選択フィールドであっても、問題は同じであると思います。実際に値/選択の変更が発生する前に 'クリック 'が発生します。 'change'はそのような場合に必要なイベントです) – CBroe

+0

この' $ counter.text(sc.find( 'selected')。length + 1)を見れば、 $ counter.txt(sc.find( 'selected')。length-1); $ counter.attr( 'value'、sc.find( 'selected')。 $ counter.attr( 'value'、sc.find( 'selected')。length-1); 'カウンタには+1が加算され、-1が減算されます。だからこのようなものを見つける – Giumazzi

+0

あなたは何を意味するのか分かりません。 – CBroe

答えて

0

を理解されるであろう、この変更を含めることを試みたが、計算は完全に間違っている

........... 
........... 
       $total.text(recalculateTotal(sc)+this.settings.data.price); 
       $total.attr('value', recalculateTotal(sc)+this.settings.data.price); 
       return 'selected'; 

      } 

       alert('You can only choose '+ maxSeats + ' seats.'); 
       return 'available'; 

     } else if (this.status() == 'selected') { //Checked 
...... 
...... 
       //update totalnum 
       $total.text(recalculateTotal(sc)-this.settings.data.price); 
       $total.attr('value', recalculateTotal(sc)-this.settings.data.price); 

before

  //update totalnum 
      $total.text(recalculateTotal(sc)); 
      $total.attr('value', recalculateTotal(sc)); 

関連するHTMLコードは、質問から欠落しているように見えるので、ここでは、(デュープについては本当にわからない、完全に正しいコード

click: function() { //Click event 
    if (this.status() == 'available') { //optional seat 
    var maxSeats = 3; 
    var ms = sc.find('selected').length; 
    //alert(ms); 
    if (ms < maxSeats) { 

       price = this.settings.data.price; 

       /* 
        $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>') 
        .attr('id', 'cart-item-'+this.settings.id) 
        .attr('value', (this.settings.row+1)+'_'+this.settings.label) 
        .data('seatId', this.settings.id) 
        .appendTo($cart); 
       */ 

        $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>') 
        .attr('id', 'cart-item-'+this.settings.id) 
        .attr('value', this.settings.id) 
        .attr('alt', price) 
        .data('seatId', this.settings.id) 
        .appendTo($cart); 

       $counter.text(sc.find('selected').length+1); 
       $counter.attr('value', sc.find('selected').length+1); 

       $total.text(recalculateTotal(sc)); 
       $total.attr('value', recalculateTotal(sc)); 

       return 'selected'; 
      } 
       alert('You can only choose '+ maxSeats + ' seats.'); 
       return 'available'; 

     } else if (this.status() == 'selected') { //Checked 

       //Update Number 
       $counter.text(sc.find('selected').length-1); 
       $counter.attr('value', sc.find('selected').length-1); 

       //Delete reservation 
       $('#cart-item-'+this.settings.id).remove(); 

       //update totalnum 
       $total.text(recalculateTotal(sc)); 
       $total.attr('value', recalculateTotal(sc)); 


       //optional 
       return 'available'; 

     } else if (this.status() == 'unavailable') { //sold 
      return 'unavailable'; 

     } else { 
      return this.style(); 
     } 
    } 
});