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

您可以使用解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

您需要在每个循环项目的末尾连接逗号。需要删除最后的逗号。

希望这会对你有所帮助。

如何从多个输入中获取数据并将它们作为字符串输出到jQuery中

3 个答案: