get class name from element with onclick

问题

Because of different reasons I can NOT use $('.class').click or on('click', function..)

So I really have to use the onclick="" event from the html element.

Is there a way to find out the class from the element where the onclick happens?

and the fiddle http://jsfiddle.net/Aw8Rb/

Thanks for all the help!

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<span class="classic one"   onclick="someFunction('one')">CLICK HERE</span>
<span class="classic two"   onclick="someFunction('two')">CLICK HERE</span>
<span class="classic three" onclick="someFunction('three')">CLICK HERE</span>
<span class="classic four"  onclick="someFunction('four')">CLICK HERE</span>


<script type="text/javascript">

    function someFunction(abc) {
        alert(abc);
        alert($(this).attr('class'));

    }

</script>
</body>
</html>

回答1:

you need to pass this reference when calling the function

try this

<span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>
......  //same for others

jquery

function someFunction(obj,abc) {
        alert(abc);
        alert($(obj).attr('class'));

    }

with plain javascript (without Jquery)

function someFunction(obj,abc) {
        alert(obj.className);
}

fiddle here

回答2:

A non-jquery way using this.className here.

回答3:

If you add the element to the argument you can use it into your function to retrieve all data that you want
Try this:

    <span class="classic one"   onclick="someFunction('one',this)">CLICK HERE</span>
    <span class="classic two"   onclick="someFunction('two',this)">CLICK HERE</span>
    <span class="classic three" onclick="someFunction('three',this)">CLICK HERE</span>
    <span class="classic four"  onclick="someFunction('four',this)">CLICK HERE</span>


    <script type="text/javascript">

        function someFunction(abc,obj) {
            alert(abc);
            alert($(obj).attr('class'));

        }
    </script>

DEMO

回答4:

From jsfiddle you provided, edit your code like below and you'll get answer (class) properly.

<span class="classic four"  onclick="someFunction(this,'four')">CLICK HERE</span>

function someFunction(obj,abc) {
    alert(abc);
    alert(obj.getAttribute('class'));   
}

Pass this as first argument and then access it in function with obj. After that you can use obj.getAttribute('class')

回答5:

Add this as an argument to the inline event handler:

<span class="classic one"   onclick="someFunction(this,'one')">CLICK HERE</span>

Then use the className property of element to get the className

function someFunction(e,abc) {
      console.log(this);
      alert(e.className);
}

Working Example http://jsfiddle.net/Aw8Rb/8/

回答6:

Pass this.className as the parameter .. eg.

<input type="button" onclick="abc(this.className)" />

回答7:

onclick="javascript:someFunction(this)"

function someFunction(obj) {  
            console.log($(obj).attr('class'));  
}

You will get the two classes in the order of writing.

来源：https://stackoverflow.com/questions/17060971/get-class-name-from-element-with-onclick

标签

javascript

jquery

onclick