2017-09-21 6 views
1

ユーザが自分のチェックボックスの1つをチェックしたときに、私の 'calculated_price'値を有効にする必要があります。 alert()は正常に動作し、正しく計算されますが、私はなぜそれが単に '0'と表示され、変更されないのか分かりません。ここ if文の変数値をif/elseの外側に渡します。

$(document).ready(function() { 
    //Global Configurations. 
    var calculated_price = 0; 
    var final_price = "قیمت نهایی برابر است با " + calculated_price + " تومان "; 

    // Menu Items. 
    var cbSelector = $("[name='cb[]']"); 
    cbSelector.change(function() { 
     if (this.checked){ 
      var currentCBSelected = $(this); 
      var currentCBValue = parseInt(currentCBSelected.val()); 

      var previousNSelected = $(this).prev("input"); 
      var previousNValue = parseInt(previousNSelected.val()); 

      previousNSelected.css("visibility","visible"); 

      calculated_price += currentCBValue * previousNValue; 
     } 
     else { 
      // Do somethings. 
     } 

    }); 

    // Calculated Price. 
    $("#calculated_price").html(final_price); 

}); 

<!-- Page Logo --> 
    <div> 
     <a href="#time_picker"><img id="page_logo" src="img/logo.png"></a> 
    </div> 

    <!-- Time Picker --> 
    <div id="time_picker"> 
     <div id="time_picker_in"> 
      <p>زمان ورود: </p> 
     </div> 
     <div id="time_picker_out"> 
      <p>زمان خروج: </p> 
     </div> 
    </div> 

    <!-- Menu Items --> 
    <div> 
     <ul id="menu_items"> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="12000" /> 
       <label for="text1">چای و ساید کیک</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="5000" /> 
       <label for="text2">چای سیاه</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="7000" /> 
       <label for="text3">چای سبز</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="7000" /> 
       <label for="text4">چای و خرما</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="7000" /> 
       <label for="text5">چای و نبات</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="7000" /> 
       <label for="text6">چای و دارچین</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="15000" /> 
       <label for="text7">آبمیوه(پرتقال،هندوانه،طالبی)</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="15000" /> 
       <label for="text8">هات چاکلت</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="15000" /> 
       <label for="text9">نسکافه</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="15000" /> 
       <label for="text10">کاپوچینو</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="15000" /> 
       <label for="text11">شکلات گلاسه</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="15000" /> 
       <label for="text12">سالاد روز</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="10000" /> 
       <label for="text13">سیب زمینی</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="15000" /> 
       <label for="text14">غذای روز کودک</label> 
      </li> 
      <li> 
       <input type="number" name="n[]" value="1" class="num_input"/> 
       <input type="checkbox" name="cb[]" value="10000" /> 
       <label for="text15">بستنی(12 اسکوپ)</label> 
      </li> 
     </ul> 
    </div> 

    <!-- White Space --> 
    <div id="white_space"></div> 

    <!-- Calculated Price --> 
    <div id="calculated_price"></div> 
+0

あなたのHTMLコードも追加してください –

+1

あなたはそれを計算した後で値を表示していないようです。最初の値0を表示していてディスプレイを更新しない場合、0しか表示されません。 – David

+2

この** $( "#calculated_price").html(final_price); ** * *変更** –

答えて

0

問題(そのcalculated_priceは変更でなければならない)、それらの値を変更することができ番号の入力を表示するチェックボックスをチェックします私のindex.htmlファイルでありますcalculate_price変数の変更がfinal_price文字列に自動的に反映されると期待しているようですが、そのようには機能しません。 calculate_price変数が変更されるたびに、final_price文字列にその変数を挿入し、htmlを再度更新する必要があります。

変更この行:

var final_price = "قیمت نهایی برابر است با " + calculated_price + " تومان "; 

へ:

var final_price = "قیمت نهایی برابر است با {calc} تومان "; 

あなたのif文の末尾に次の行を追加します。

$("#calculated_price").html(final_price.replace("{calc}", calculated_price.toString()); 

そしてへのあなたの最後の行を変更します。

$("#calculated_price").html(final_price.replace("{calc}", calculated_price.toString()); 
+0

実際に変更された内容を説明できますか?そしてその変化は何をするのでしょうか? – GrumpyCrouton

+0

完了。私はそれがおそらく最善の解決策ではないことを知っていますが、私は彼が容易に理解できるはずだと思います。 – lancew

+0

ありがとうございます。私はJavascriptの中かっこの構文に慣れていませんが、私はJavaScriptの開発者でもありません。私はそれがどれほど一般的な知識であるか分かりませんが、PHPでは基本的にそこに行った変更は何の違いもありません。 – GrumpyCrouton

関連する問題