计算预定义输入属性的输入总数答案

【问题标题】：count total number of input where input attribute is pre defined计算预定义输入属性的输入总数
【发布时间】：2014-01-04 07:50:02
【问题描述】：

我正在尝试使用 jquery 创建一个函数，我想在我定义的 attibute 值的页面中获取 input 的总数。例如，有四个输入标签

<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="567" total_quantity="3" name="product1" value="Nokia rita" class="product-10105">
<input type="hidden" class="code" barcode="200" total_quantity="3" name="product1" value="book" class="product-200">

在上面的标签中，我想在变量中预定义条形码编号，并相应地计算输入的数量，并在我提供的条形码编号的变量中获取 total_quantity 的值。我制作了以下代码来获取总输入，但它适用于所有输入，而不是根据我将指定的条形码。

var barcode_pd = $('input[barcode]').size();
var total_pd = $('input.code').attr("total_quantity");
var sumOfVals = 0;
$(".mn-no-cnt").each(function(){sumOfVals = sumOfVals + parseInt($(this).val(), 10);});

使用上面的代码，输入计数的输出是4，我也想指定条形码编号，例如567，以便计数可以是3，或者如果我使用条形码编号200，那么计数是1。

【问题讨论】：

total_quantity 和 barcode 不是有效的 HTML。您应该使用data- 属性
感谢您的建议。我会这样做，您能否为这个问题提出一个好的解决方案？
您可以改用data- 属性。例如：data-total_quantity
你永远不会为多个元素使用相同的 ID 和名称。
感谢您指出问题已解决。

标签： javascript jquery

【解决方案1】：

我使用数组来存储值。

var code = [];
var count = [];
$("input.code").each(function(){
    var c = $(this).attr("barcode");    
    if(code.indexOf(c) >= 0){
        count[code.indexOf(c)] += 1;
    }
    else{
        code.push(c);
        count.push(1);
    }
});
for(var i=0;i<code.length;i++){
    $("body").append("<p>Barcode:"+code[i]+" Count:"+count[i]+"</p>");
}

DEMO here.

【讨论】：

感谢您的回答，但我想自己指定条形码编号。有没有可能的方法来做到这一点，例如var barcode_pre_defined= '567';，然后使用这个变量来过滤输入？

【解决方案2】：

不使用jQuery：

function getCount(barcode){
  var code = document.getElementsByClassName('code') ;
  var length = code.length ;
  var count = 0 ;
    for(var i = 0 ; i < length ; i++){
      if(code[i].attributes['barcode'].value == barcode) count++ ;
  }
  return count ;
}

// Test

alert(getCount(567)) ; // 3
alert(getCount(200)) ; // 1

Demo : http://jsfiddle.net/wz98E/

【讨论】：

【解决方案3】：

http://jsfiddle.net/A95Js/

function countBarcode(numberToFind){
    var countInputs = 0;

    $('input[barcode]').each(function(){
        if($(this).attr("barcode") == numberToFind){
            countInputs ++;
    }

        return countInputs;

});

}

$('#answer').html(countBarcode(567));

这纯粹是为了计算它们 - 但结合 Hirals 的答案，您应该能够弄清楚如何将他的变成一个函数。上面的 JSfiddle - 显然要使其有用，您需要返回值而不是将其添加到 div - 只是展示了如何计算它。

【讨论】：

【解决方案4】：

试试这个。将barcode 变量设置为您要搜索的条形码。我还转换为data- 属性并提供代码来计算和求和data-total_quantity：

HTML：

<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10105">
<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10106">
<input type="hidden" class="code" data-barcode="567" data-total_quantity="3" name="product1" value="Nokia rita" id="product-10107">
<input type="hidden" class="code" data-barcode="200" data-total_quantity="3" name="product1" value="book" class="product-200">

Javascript：

$(function () {
    var barcode = 567; // set to whatever you want to search for...
    var sumOfVals = 0;
    $("input.code[data-barcode='" + barcode + "']").each(function () {
        sumOfVals += parseInt($(this).data('total_quantity'), 10);
    });
    alert("Length: " + $("input.code[data-barcode='" + barcode + "']").length);
    alert("Sum: " +  sumOfVals);
});

小提琴：

http://jsfiddle.net/d89BR/4/

【讨论】：

【解决方案5】：

试试这个：

var barcode = 123;
var $123 = $('input[data-barcode="' + barcode + '"]');
var howMany = $123.length;

var sumOfQuantities = Function('return ' + $123.map(function () {
    return $(this).data('quantity');
}).get().join('+') + ';')();

var sumOfValues = Function('return ' + $123.map(function () {
    return $(this).val() || '0';
}).get().join('+') + ';')();

HTML（示例）：

<input data-barcode="123" data-quantity="123" value="123" />

【讨论】：