如何将选定的按钮名称和值推送到 javascript 多维数组中？答案

【问题标题】：How can I push selected buttons name and value into javascript multidimensional array?如何将选定的按钮名称和值推送到 javascript 多维数组中？
【发布时间】：2017-05-07 14:31:38
【问题描述】：

我有一些这样的按钮组：

<div class="btn-group" id="RPPP">

            <button type="button" class="btn" name="PPP" value="1">1</button>
            <button type="button" class="btn" name="PPP" value="2">2</button>
            <button type="button" class="btn" name="PPP" value="3">3</button>
            <button type="button" class="btn" name="PPP" value="4">4</button>
            <button type="button" class="btn" name="PPP" value="5">5</button>
            </div>

...底部有一个“分析”按钮。

<a href="#last" id="secnext" class=" btn-lg btn-info " >Analyse</a>

they look like this

在 eventlistener 函数中，我想将所选按钮的名称和值推送到多维数组中。

 var myBtnn = document.getElementById('secnext');

        myBtnn.addEventListener('click', function(event) {
            var array =[];

          //store buttons name and value both in an array

          }

这样我就可以拥有它们：

[PPP][4]

[TTT][3]

[DDD][5]

【问题讨论】：

其他按钮组的外观如何？其他组中有其他按钮吗？
你应该使用复选框吗？
@PankajShukla 是的！每个按钮组都在其他组中，但它们看起来相同。
@darham 我应该吗？
imo 是的！你在你的 js 中做的是向你的分析按钮添加一个事件监听器，但你的其他按钮没有状态可以抓取。除非您为每个事件添加事件侦听器并在用户单击它们时获取值，否则您不能只调用 js 来获取没有更改状态的推送按钮

标签： javascript html arrays multidimensional-array

【解决方案1】：

看看这个示例代码。你需要Array#reduce 和forin 来实现你想要的。请注意，我正在使用此调用选择所有按钮：另外，请注意，我已将所有按钮放在一组中，但我希望您能理解。

var coll = document.querySelectorAll('button');

因此，根据您的 html，您可能需要更改 html 以选择按钮。

var myBtnn = document.getElementById('secnext');

            myBtnn.addEventListener('click', function (event) {
                var array = [];
                var coll = document.querySelectorAll('button');
                //store buttons name and value both in an array
                var collArr = [].slice.call(coll);
                var ans = [];
                 
                var obj = collArr.reduce(function (obj, btn) {
                    if (!obj[btn.name]) {
                        obj[btn.name] = 0;
                    }
                    obj[btn.name]++;
                    return obj;
                }, {});

                for (var i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        ans.push([i, obj[i]]);
                    }
                }

                console.log(ans);
            });

<div class="btn-group" id="RPPP">

        <button type="button" class="btn" name="PPP" value="1">1</button>
        <button type="button" class="btn" name="PPP" value="2">2</button>
        <button type="button" class="btn" name="PPP" value="3">3</button>
        <button type="button" class="btn" name="PPP" value="4">4</button>
        

        <button type="button" class="btn" name="TTT" value="1">1</button>
        <button type="button" class="btn" name="TTT" value="2">2</button>
        <button type="button" class="btn" name="TTT" value="3">3</button>

        <button type="button" class="btn" name="DDD" value="4">4</button>
        <button type="button" class="btn" name="DDD" value="5">5</button>
        <button type="button" class="btn" name="DDD" value="4">6</button>
        <button type="button" class="btn" name="DDD" value="5">7</button>
        <button type="button" class="btn" name="DDD" value="5">8</button>
</div>
    
    <a href="#last" id="secnext" class=" btn-lg btn-info ">Analyse</a>

【讨论】：

【解决方案2】：

您应该使用对象而不是数组。所以如果你有一个像 PPP 这样的对象，你可以在对象里面放一个数组。

例子：

var obj = {
    'PPP' : ['1', '2'],
    'TTT' : ['1', '2']
};
obj.PPP[0] == '1';
obj.PPP[1] == '2';
obj.TTT[0] == '1';
obj.TTT[1] == '2';

【讨论】：