Javascript-循环并向元素添加类

我正在工作，必须修改一点Jquery代码，以便它只使用Javascript，而不使用Jquery。我没有被教过如何只使用Javascript，我只被教过如何将Jquery与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吗？

给你：

---

要20美元！jQuery是Javascript！！！如果不了解javascript，就无法了解jQuery，将代码分解为多个部分并开始研究每个部分的作用以及如何复制它是没有意义的。这样你也会学到一些东西。这个问题似乎离题了，因为它寻找的是一个劳动力，而不是帮助。hasClass等价物是检查string类的className indexOf，一个元素可以有多个类

<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>