Javascript - 循环并向元素添加类

时间:2014-02-11 15:34:03

标签: javascript jquery

我正在工作并且必须更改一小段Jquery代码,以便它只使用Javascript,而不是Jquery。我还没有被教过如何只使用Javascript,我只被教过如何使用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给我吗?

1 个答案:

答案 0 :(得分: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>