javascript - 여러 HTML #ID를 검색하고 함수로 전달

Question

버튼을 클릭하여 필드를 추가 할 수있는 주문 양식이 있습니다. 나는 주문 가격을 합산하는 일부 백엔드 javascript를 가지고있다. 그러나 총체적인 스크립트는 나를 피한다.

내 문제는 전체 DOM을 검색하고 다음 패턴과 일치하는 ID가 몇 개인 지 알아 내려면 스크립트가 필요하다는 것입니다.

matchStr = new RegExp("\\btotprice\\d{2}\\b", "gi"); 

내가하면 :이 정규식과 함께 연주했지만, 운이없는 많은 내가 두려워

totprice01 totprice02 totprice03 totprice (N) 지금까지 보았던 함수에 전달해야하는 모든 HTML ID의 배열이 있습니다. 동적 인 코드가 아닌 모든 코드가 하드 코딩되어 있습니다.

document.getElementById('totpricetot').value = Math.round((parseFloat(document.getElementById('totprice1').value)+parseFloat(document.getElementById('totprice2').value)+parseFloat(document.getElementById('totprice3').value)+parseFloat(document.getElementById('totprice4').value)+parseFloat(document.getElementById('totprice5').value)+parseFloat(document.getElementById('totprice6').value)+parseFloat(document.getElementById('totprice7').value)+parseFloat(document.getElementById('totprice8').value)+parseFloat(document.getElementById('totprice9').value)+parseFloat(document.getElementById('totprice10').value))*100)/100; 

누구든지 이것을 표현식 + 함수에 넣으면 모든 값의 합계를 구할 수 있습니까?

고맙습니다.

편집

나는 일반 팔자 '자바 스크립트를 사용하여 단지 도랑하기로 결정 OK - JQuery와 그것입니다! 아래 예제 중 일부를 사용하여이 코드를 작성했지만 다른 사람이 디버깅하도록 도울 수 있습니다. 디버거에서 "정의되지 않은"오류가 계속 발생합니다.이 함수는 나머지 DOM에서는 사용할 수없는 것으로 보입니다.

<input id="totprice08" onChange="totChange()" class="total_field" /> 
<input id="totprice09" onChange="totChange()" class="total_field" /> 
<input id="totprice10" onChange="totChange()" class="total_field" /> 
etc... 
<input id="totpricetot" value="0.00" name="totpricetot" /> 

jQuery(function($) { 
    function totChange() { 
    var sum=0; 
    $('.total_field').each(function() { 
     sum += $(this).val() * 1; 
    }); 
    $('#totpricetot').val(sum); 
    } 
}); 

Answer 1

:

var sum = 0; 
$('[id^=totprice-]').each(function() 
{ 
    sum += $(this).val(); 
}); 

Answer 2

당신은 당신의 총 가격 요소를 같은 CSS 클래스를 제공하고이 클래스의 모든 요소를 ​​얻을 수 (좋은 JQuery와 쉽게).

Answer 3

각 요소에 클래스를 지정하고 jQuery를 사용하십시오. 당신이 선택하고이 같은 요소를 요약 할 수 jQuery를 사용

Answer 4

해당 클래스 이름 (jQuery를 또는 다른 프레임 워크하고자하여 그 입력을받을 다음 클래스를 요약하고 필요로하는 입력 줘 여기에 편리하게 들어와). 당신이 jQuery를 사용한다면

당신이 뭔가를 할 수 있습니다 :

function calculateSum() { 
    var sum = 0; 
    $('.YourClass').each (function() { 
     sum += $(this).val() * 1; 
    }); 

    return sum; 
} 

Answer 5

솔루션이 많이 있습니다. 문제의 모든 요소에 동일한 클래스 이름을 지정하고 jQuery (또는 이와 유사한 함수)를 사용하는 것 외에 일부 JavaScript 변수에서 요소의 총 개수를 기억할 수도 있습니다. 가능할까요? 나도 알아. 그건 옛날 학교의 해결책이야. jQuery 또는 다른 JavaScript 라이브러리를 사용하고 있다고 표시하지 않았으므로 더 적합 할 수 있습니다.

편집 : 그냥 더 명시합니다 :

// your variable, updated every time you add/remove a new field 
var fieldsCount; 

// whenever you need to do anything with all the fields: 
for (var i = 0; i < fieldsCount; i++) 
{ 
    var field = document.getElementById("totprice" + i); 
    // ... 
}  

Answer 6

내가 SO, 응답됩니다에있는 모든 자바 스크립트 질문에 "jQuery를 사용하여"어떻게 사랑 ... 어쨌든

...당신도 그냥 일반 팔자 '자바 스크립트로 작업을 수행 할 수 있습니다

var inputs = document.getElementsByTagName("input"); 
var priceInputs = []; 
for (var i=0, len=inputs.length; i<len; i++) { 
    if (inputs[i].tagName.indexOf("totprice") > -1) { 
     priceInputs[priceInputs.length] = parseInt(inputs[i].value); 
    } 
} 
calcTotal(priceInputs); 

은 그럼 그냥 배열을 통해 루프 기능을 만들고 (요약 :