有没有办法在Javascript中按类获取输入值？

时间：2015-11-13 15:53:54

标签： javascript jquery arrays

正如标题所说，是否有任何方法可以在Javascript中按类获取输入值？我正在尝试使用类名获取每个输入值，并将它们存储在数组中，如此

＆＃13;
＆＃13; 
$(document).ready(function(){
    $("#Scal").click(function() {
        var map = [];
        $('input').each(function() {
            map[$(this).attr('class="Sc"')] = $(this).val();
        });

        alert(map.Sc1);
    
    });
});
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

顺便说一下，输入的类型是数字

更新： - 我已添加了我的HTML代码。我想要的是获取每个信用输入框并使用类

将其存储在一个数组中

2 个答案:

答案 0 :(得分：1)

这创建＆lt; className，arrayOfInputs＆gt;图：

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();
});

答案 1 :(得分：1)

听起来你想要一个类名的地图值？如果是这样，那只是$(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（＆＃39; name＆＃39;）代替，这是表单数据在提交时的更好表示？

相关问题
最新问题