如何從多個輸入獲取數據並在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> 

Answer 2

您需要通過串聯來迭代構建輸出，並將其應用到循環外。

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

Answer 3

在這里你有一個解決方案

 var output = ""; $('input').each( function(){ var input = $(this); // Check quantity is more than 0 if ($(input).val() > '0'){ output += input.attr('data-id') + ':' + input.val() + ","; } }); console.log(output); $('button').attr('data-ids', output.substr(0, output.length - 1)); 

 <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> 

您需要在每個循環項的末尾連接逗號 ，還需要刪除最后一個逗號 。

希望這會幫助你。