javascript - 如何从多个输入获取数据并将其作为 jQuery 中的字符串输出

Question

好的，我有一堆输入，如下所示:

<input type="number" name="quantity" value="0" data-id="100">
<input type="number" name="quantity" value="1" data-id="101">
<input type="number" name="quantity" value="2" data-id="102">
<input type="number" name="quantity" value="3" data-id="103">
<input type="number" name="quantity" value="0" data-id="104">

<button data-ids=""></button>

我想循环遍历这些并从值大于 0 的输入中获取 data-id 和值，并将其输出到按钮 data-ids 属性，如下所示:

<button data-ids="101:1,102:2,103:3"></button>

这是我到目前为止的代码:

$('input').each( function(){  
    var input = $(this);

    // Check quantity is more than 0
    if ($(input).val() > '0'){

        var output = input.attr('data-id') + ':' + input.val();

        console.log(output);
        $('button').attr('data-ids', output);

    }
});

这似乎在控制台中输出数据，但只输出按钮中的最后一个输入。

Answer 1

每次您不这样做时，您都需要连接到您的data-ids。每一项都会取代前一项。

var dataIds = $('button').attr('data-ids') + output;
$('button').attr('data-ids', dataIds );

但是使用这种方法，您不会在输出中得到 , 。

尝试这种方法。插入数组，然后通过 ,join 项目。

代码

var output = [];

$('input').each( function(){  
    var input = $(this);

    if ($(input).val() > '0'){
        output.push(input.attr('data-id') + ':' + input.val());
    }
});

$('button').attr('data-ids', output.join(','));
console.log($('button').attr('data-ids'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="quantity" value="0" data-id="100">
<input type="number" name="quantity" value="1" data-id="101">
<input type="number" name="quantity" value="2" data-id="102">
<input type="number" name="quantity" value="3" data-id="103">
<input type="number" name="quantity" value="0" data-id="104">

<button data-ids=""></button>