Javascript - 루핑 및 요소에 클래스 추가

Question

저는 일하고있어 Jquery 코드 만 변경하여 Javascript 만 사용하고 Jquery는 사용하지 않아야합니다. Javascript 만 사용하는 방법을 배우지 못했지만 Javery로 Jquery를 사용하는 법을 배웠습니다 (끔찍한 사실입니다). 다음은 Jquery 코드입니다.

var counter = 0; 

$(document).ready(function() { 

    $('.Content ul li a').click(function() { 
     if ($(this).hasClass('clicked')) { 
      //do nothing 
     } else { 
      $(this).addClass('clicked'); 
      counter += 1; 
     } 

     if (counter == 3) { 
      // call a function 
     } 
    }); 

}); 

코드가 상당히 작습니다. 누군가 나를 위해 자바 스크립트로 변환 할 수 있습니까? 여기

Answer 1

당신은 이동 : http://jsfiddle.net/29Sby/1/

<style> 
.clicked{color:green; font-weight:bold;} 
</style> 

<a id="link1" href="javascript:void(0); /*put URLs here if you need to*/" onclick="doStuff(this)">LINK 1</a><br/> 
<a id="link2" href="javascript:void(0);" onclick="doStuff(this)">LINK 2</a><br/> 
<a id="link3" href="javascript:void(0);" onclick="doStuff(this)">LINK 3</a><br/> 
<a id="link4" href="javascript:void(0);" onclick="doStuff(this)">LINK 4</a><br/> 
<a id="link5" href="javascript:void(0);" onclick="doStuff(this)">LINK 5</a><br/> 

<script> 
var counter = 0; 

doStuff=function(obj) 
{ 
    //alert(obj.id); 
    if (obj.className === 'clicked') { 
     //do nothing 
     alert('already clicked'); 
    } else { 
     obj.className = 'clicked'; 
     counter += 1; 
    } 

    if (counter === 3) { 
     alert('call a function if you want'); 
    } 
} 
</script>