有没有任何方法可以在Javascript中按类获取数组中的输入值
Is there any way to get inputs values in array by class in Javascript?
正如标题所说，有没有办法在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();
});
这将使用输入name作为关键来收集input值
var map = {};
$('input[class="Sc"]').each(function(){
map[$(this).attr('name')] = $(this).val();
});
听起来你想要一个类名到值的映射？如果是这样的话，这只是$(this).attr('class="Sc"')位中的一个小错误。
试试这个：
$(document).ready(function(){
$("#Scal").click(function() {
var map = [];
$('input').each(function() {
map[$(this).attr('class')] = $(this).val();
});
alert(map.Sc1);
});
});
请注意，如果类名不是唯一的，则值将被覆盖。为什么不使用$（this）.attr（'name'）呢？提交表单时，它可以更好地表示表单数据？
相关文章：
- 获取数组的总值
- 按最大值获取数组索引
- React.js如何从js文件中获取数组
- TinyMCE获取数组数据
- 如何获取数组详细信息另一页
- 使用javascript从节点属性获取数组值
- 使用JavaScript获取数组中表单的所有控件
- 获取数组的长度-打印不正确的值
- 正在从JSON对象获取数组
- 什么'获取数组的已定义部分的最快方法是什么?JS
- 如何使用angular指令从html中获取数组
- 如何获取数组中数字的最大出现次数
- 根据优先级获取数组的值
- JAVASCRIPT:获取数组中的值
- 获取数组的元素，无论索引的大小如何
- JavaScript:在XML中搜索节点并从该节点获取数组
- 无法获取数组的长度
- 在数字索引循环中获取数组项的键
- 如何使用JavaScript或jQuery获取数组中选定的optgroup和选项
- Javascript-函数获取数组元素参数未定义/为null
