> 웹 프론트엔드 > JS 튜토리얼 > 태그에 이벤트를 추가하는 Node.js 구현 방법(클로저 루프 사용)

태그에 이벤트를 추가하는 Node.js 구현 방법(클로저 루프 사용)

高洛峰
풀어 주다: 2017-01-20 13:05:46
원래의
1432명이 탐색했습니다.

이 글의 예시에서는 js의 a 태그에 이벤트를 추가하는 방법을 설명합니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

예를 들어 설명하세요.

효과 달성: ml-praise 스타일 클래스를 사용하여 a 태그에 이벤트를 추가하는 루프, a 태그를 클릭하면 해당 수량은 1씩 증가합니다.

HTML 구조는 다음과 같습니다:

<ul>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">100</span></a></li>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">200</span></a></li>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">300</span></a></li>
    <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">400</span></a></li>
</ul>
로그인 후 복사

JS 구현 코드:

function addPraiseNum() {
  var praiseObjs = document.getElementsByClassName(&#39;ml-praise&#39;);
  for (var i = 0; i < praiseObjs.length; i++) {
 var praiseObj = praiseObjs[i];
 praiseObj.onclick = (function (dingObj) {
   return function () {
 dingObj.innerHTML = parseInt(dingObj.innerHTML) + 1;
   };
 })(praiseObj.getElementsByClassName(&#39;ding-num&#39;)[0]);
  }
}
로그인 후 복사

구현 효과는 다음과 같습니다. 🎜>

태그에 이벤트를 추가하는 Node.js 구현 방법(클로저 루프 사용)

이 글이 JavaScript 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.

a 태그에 이벤트를 추가하는 더 많은 js 메서드(클로저 루프 사용)를 보려면 PHP 중국어 웹사이트에서 관련 기사를 확인하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿