클래스 이름에 의한 onclick 카운트 항목

Question

나는 이숍 바구니를 만들고 싶습니다. 그래서 구매 버튼을 누르면 아이템을 계산하고 싶습니다. 나는 getElementById를 사용하고 간단하게 내 바구니에있는 id의 이름을 호출하려고 시도했다.

- 어딘가에 상단 -----

<div>items :<input type="text" id="tb" style="width: 20px; color:green; font-weight:bold; border:none; background: none; margin-left:20px;"/></div> 

에서

<script type="text/javascript"> 
    var index = 0; 
</script> 

과 내가 구매 버튼 -------을 누르면

<input name="button" type="submit" value="add to basket" onClick="index = index + 1;document.getElementById('tb').value = index;" /> 

그래서이 일을 ..하지만 바구니를 복제하고 페이지에서 두 번 (상단과 끝에) 그래서 내가 다시 같은 id를 호출하려고한다면 알고 jus t는 작동하지 않는다 (id의 고유성을 야기 함). 나는 classname istead를 사용해야한다고 생각하지만 어떻게해야할지 모르겠다. ..

나는 해결책을 찾기를 희망하는 새로운 사람들이다. 감사합니다.

Answer 1

document.getElementById('tb').value = index을 복제하고 두 번째 (고유 한) ID를 사용할 수 있습니다. 또는 documnet.getElementsByName('elementsname')을 반복하지만 input에는 name 속성이 있어야합니다.

$(".class").each(function(){ index++; }); 
$("#tb").val(index); 

Answer 2

이 샘플 코드 패턴을 시도 클릭 핸들러의이 함수 :

<input name="button" type="submit" value="add to basket" onClick="tb_increment();" /> 

Answer 3

사용하는 대신 ID의 종류 :

function tb_increment() { 
    index++; 
    tbs = document.getElementsByClassName("tb"); 
    for (var i = 0; i < tbs.length; i++) { 
     tbs[i].value = index; 
    } 
} 

하는 것은 다음 사용

<div>items :<input type="text" class="tb" style="width: 20px; color:green; font-weight:bold; border:none; background: none; margin-left:20px;"/></div> 

그런 다음 그 클래스가있는 항목을 반복