Javascript - 在元素中循環並添加一個類

Question

我在工作，必須更改一小部分Jquery代碼，以便它只使用Javascript，不使用Jquery。我沒有被教過如何只使用Javascript，我只被教過如何使用Javascript（我知道，這太可怕了）。這是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 
     } 
    }); 

}); 

該代碼相當小。有人可以將它轉換爲只爲我的Javascript？

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>