2015-11-13 59 views
0

我使用每個函數來獲取輸入框的值和選擇框來進行一些計算,但似乎計算在模塊1部分中工作正常,只有其餘部分模塊什麼都不發生由於某種原因,我不知道它是什麼至今: -使用Javascript中的每個()都無法獲得正確的結果

這裏是正在發生的事情的一個演示: -

http://jsfiddle.net/r2shhxhj/

,這裏是我的javascript代碼

$(document).ready(function(){ 
 
    $("#Scal").click(function() { 
 
\t var sumSc = 0; 
 
\t var sumSg = 0; 
 
\t var sumSgSc = 0; \t 
 
     $('[name^="Sc"], [name^="Sgrade"]').each(function() { 
 
\t \t \t sumSc += +$(this).val(); 
 
      sumSg = $(this).val() * $('[name^="Sgrade"]').val(); 
 
\t \t \t sumSgSc += +sumSg 
 
      \t }); 
 
\t \t \t var total = sumSgSc/sumSc 
 
\t \t \t console.log(total); 
 
\t \t  $('#Sres').val(total); 
 
    }); 
 
    });

回答

3

你發現兩個學分和檔次,當內在邏輯預計this是信用卡號。

找到了有學分,你想找到下一個年級;相反,你拉起所有等級,並從中獲得val(),它將始終返回第一個匹配的值。

相反,搜索只是學分。然後,找到父母li的下一個兄弟姐妹,並在內搜索的等級。

$(document).ready(function() { 
 
    $("#Scal").click(function() { 
 
    var sumSc = 0; 
 
    var sumSg = 0; 
 
    var sumSgSc = 0; 
 
    $('input[name^="Sc"]').each(function() { 
 
     var grade = $(this).closest('li').next('li').find('[name^=Sgrade]'); 
 
     sumSc += +$(this).val(); 
 
     sumSg = $(this).val() * grade.val(); 
 
     sumSgSc += +sumSg 
 
    }); 
 
    var total = sumSgSc/sumSc 
 
    $('#Sres').val(total); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-role="page"> 
 
    <div data-role="header" data-theme="f"> <a data-iconpos="notext" data-transition="pop" data-direction="reverse" data-role="button" data-icon="home" title="Home" href="index.html">Home</a> 
 

 
    <h1>BENG & BSc</h1> 
 

 
    </div> 
 
    <form id="form"> 
 
    <div id="GPA1" class="GPA1"> 
 
     <div class="BENG" id="N1"> 
 
     <ul data-role="listview" data-inset="true"> 
 
      <li style="border:none"> 
 
      <h1>Module 1:</h1> 
 

 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sc1">Credits:</label> 
 
      <input type="number" step="0.01" name="Sc1" id="Sc1" class="Sc" value="" data-clear-btn="true"> 
 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sgrade1" class="select">Grade:</label> 
 
      <select name="Sgrade1" class="Sgrade" data-theme="f" id="Sgrade1"> 
 
       <option value="-1">—</option> 
 
       <option value="4">A</option> 
 
       <option value="3.7">A-</option> 
 
       <option value="3.3">B+</option> 
 
       <option value="3">B</option> 
 
       <option value="2.7">B-</option> 
 
       <option value="2.3">C+</option> 
 
       <option value="2">C</option> 
 
       <option value="1.7">C-</option> 
 
       <option value="1.3">D+</option> 
 
       <option value="1">D</option> 
 
       <option value="0">F</option> 
 
      </select> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="BENG" id="N2"> 
 
     <ul data-role="listview" data-inset="true"> 
 
      <li style="border:none"> 
 
      <h1>Module 2:</h1> 
 

 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sc2">Credits:</label> 
 
      <input type="number" step="0.01" name="Sc2" id="Sc2" class="Sc" value="" data-clear-btn="true"> 
 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sgrade2" class="select">Grade:</label> 
 
      <select name="Sgrade2" class="Sgrade" data-theme="f" id="Sgrade2"> 
 
       <option value="-1">—</option> 
 
       <option value="4">A</option> 
 
       <option value="3.7">A-</option> 
 
       <option value="3.3">B+</option> 
 
       <option value="3">B</option> 
 
       <option value="2.7">B-</option> 
 
       <option value="2.3">C+</option> 
 
       <option value="2">C</option> 
 
       <option value="1.7">C-</option> 
 
       <option value="1.3">D+</option> 
 
       <option value="1">D</option> 
 
       <option value="0">F</option> 
 
      </select> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="BENG" id="N3"> 
 
     <ul data-role="listview" data-inset="true"> 
 
      <li style="border:none"> 
 
      <h1>Module 3:</h1> 
 

 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sc3">Credits:</label> 
 
      <input type="number" step="0.01" name="Sc3" id="Sc3" class="Sc" value="" data-clear-btn="true"> 
 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sgrade3" class="select">Grade:</label> 
 
      <select name="Sgrade3" class="Sgrade" data-theme="f" id="Sgrade3"> 
 
       <option value="-1">—</option> 
 
       <option value="4">A</option> 
 
       <option value="3.7">A-</option> 
 
       <option value="3.3">B+</option> 
 
       <option value="3">B</option> 
 
       <option value="2.7">B-</option> 
 
       <option value="2.3">C+</option> 
 
       <option value="2">C</option> 
 
       <option value="1.7">C-</option> 
 
       <option value="1.3">D+</option> 
 
       <option value="1">D</option> 
 
       <option value="0">F</option> 
 
      </select> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="BENG" id="N4"> 
 
     <ul data-role="listview" data-inset="true"> 
 
      <li style="border:none"> 
 
      <h1>Module 4:</h1> 
 

 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sc4">Credits:</label> 
 
      <input type="number" step="0.01" name="Sc4" id="Sc4" class="Sc" value="" data-clear-btn="true"> 
 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sgrade4" class="select">Grade:</label> 
 
      <select name="Sgrade4" class="Sgrade" data-theme="f" id="Sgrade4"> 
 
       <option value="-1">—</option> 
 
       <option value="4">A</option> 
 
       <option value="3.7">A-</option> 
 
       <option value="3.3">B+</option> 
 
       <option value="3">B</option> 
 
       <option value="2.7">B-</option> 
 
       <option value="2.3">C+</option> 
 
       <option value="2">C</option> 
 
       <option value="1.7">C-</option> 
 
       <option value="1.3">D+</option> 
 
       <option value="1">D</option> 
 
       <option value="0">F</option> 
 
      </select> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="BENG" id="N5"> 
 
     <ul data-role="listview" data-inset="true"> 
 
      <li style="border:none"> 
 
      <h1>Module 5:</h1> 
 

 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sc5">Credits:</label> 
 
      <input type="number" step="0.01" name="Sc5" id="Sc5" class="Sc" value="" data-clear-btn="true"> 
 
      </li> 
 
      <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sgrade5" class="select">Grade:</label> 
 
      <select name="Sgrade5" class="Sgrade" data-theme="f" id="Sgrade5"> 
 
       <option value="-1">—</option> 
 
       <option value="4">A</option> 
 
       <option value="3.7">A-</option> 
 
       <option value="3.3">B+</option> 
 
       <option value="3">B</option> 
 
       <option value="2.7">B-</option> 
 
       <option value="2.3">C+</option> 
 
       <option value="2">C</option> 
 
       <option value="1.7">C-</option> 
 
       <option value="1.3">D+</option> 
 
       <option value="1">D</option> 
 
       <option value="0">F</option> 
 
      </select> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <ul data-role="listview" data-inset="true" id="buttons"> 
 
     <li class="ui-body ui-body-b" style="border:none"> 
 
     <fieldset class="ui-grid-a"> 
 
      <div> 
 
      <button type="button" id="Sadd" name="Sadd" data-theme="f">Add Module</button> 
 
      </div> 
 
     </fieldset> 
 
     </li> 
 
     <li class="ui-body ui-body-b" style="border:none"> 
 
     <fieldset class="ui-grid-a"> 
 
      <div> 
 
      <button type="button" id="Sremove" name="Sremove" data-theme="f">Remove Module</button> 
 
      </div> 
 
     </fieldset> 
 
     <li data-role="fieldcontain" style="border:none"> 
 
      <label for="Sres">Your GPA:</label> 
 
      <input type="number" step="0.01" name="Sres" id="Sres" value="" data-clear-btn="true" readonly> 
 
     </li> 
 
     </li> 
 
     <li class="ui-body ui-body-b" style="border:none"> 
 
     <fieldset class="ui-grid-a"> 
 
      <div> 
 
      <button type="button" id="Scal" name="Scal" data-theme="f">Calculate</button> 
 
      </div> 
 
     </fieldset> 
 
     </li> 
 
     <li class="ui-body ui-body-b" style="border:none"> 
 
     <fieldset class="ui-grid-a"> 
 
      <div> 
 
      <button type="reset" data-theme="d">Reset</button> 
 
      </div> 
 
     </fieldset> 
 
     </li> 
 
    </ul> 
 
    </form> 
 
</div>

+0

感謝您的幫助 – Shihab

相關問題