如标题所说,有没有办法在Javascript中按类获取数组中的输入值?我正在尝试使用类名称获取每个输入值,并将其存储在这样的数组中
$(document).ready(function(){
$("#Scal").click(function() {
var map = [];
$('input').each(function() {
map[$(this).attr('class="Sc"')] = $(this).val();
});
alert(map.Sc1);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CCE GPA Calculator</title>
<meta name="viewport" content="initial-scale=.80; maximum-scale=.80; minimum-scale=.80;" />
<link rel="stylesheet" type="text/css" href="css/HideSpiner.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
</head>
<body>
<div data-role="page">
<script type="text/javascript" src="js/tbenggpacalc.js">
</script>
<script type="text/javascript" src="js/test.js"></script>
<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 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 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 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 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 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>
</body>
</html>
顺便说一句,输入的类型是数字
更新:-我已经添加了我的HTML代码。我想要的是获取学分的每个输入框,并将其存储在使用类的数组中
此创建<className,arrayOfInputs>映射:
var map = {};
$('input').each(function() {
var $this = this;
($this.className||'').split(/\s+/).forEach(function(className){
if(!map[className]) map[className] = [];
map[className].push($this);
})
});
这收集了select
价值
var map = {};
$('input[class="Sc"]').closest('ul').find('select').each(function(){
map[$(this).attr('name')] = $(this).val();
});
这input
使用输入name
作为键来收集值
var map = {};
$('input[class="Sc"]').each(function(){
map[$(this).attr('name')] = $(this).val();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句