Click button, display css class name

Question

When I click button (eg.input type="button" class="test"), I want to display style sheet class name.

I already tried like this.

$(this).get(0).style.name

But i get only undefined message. Please let me know how to get it.

@@Edit

Let me show you my coding.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<script type="text/javascript" src="jquery-1.6.4.js"></script>  
<script type="text/javascript" src="jquery-fieldselection.js"></script>

<script>
    $(document).ready(function(){
        var CurrentTextBoxID = "";          

        // toggles the keyboard to show or hide when link is clicked
        $(":text").focus(function(e) {              

            CurrentTextBoxID = this.id;
            var top = ($(window).height() - $('#keyboard').height()) - 25;        
            var left = ($(window).width() - $('#keyboard').width()) / 2;

            //alert(CurrentTextBoxID + " focus In");        
            $('#keyboard').css(
                {               
                    "left": left+"px",
                    "top": top+"px"
                }
            ).toggle();

            $('#keyboard').show();
        });


        //$(":text").focusout(function() {
        $(":text").focusout(function() {                

            alert($(this).attr('class'));

            if($(this).attr('class') != "testClass"){
                $('#keyboard').hide();
            }


        });

        // function thats called when any of the keys on the keyboard are pressed
        $("#keyboard input").bind("click", function(e) {                    
            $('#'+CurrentTextBoxID).replaceSelection($(this).val(), true);      
        }); 
    });
</script>

<style type="text/css">
#keyboard {
    position: fixed;
    background: #eee;
    display: none;
    border: 1px solid #ccc;
    border-radius:7px;
    width: 700px;
    height: 240px;
    padding: 5px;
    cursor: move;
    box-shadow: -5px -5px 5px 5px #888;
    -moz-border-radius: -5px -5px 5px 5px #888;
    -webkit-border-radius: -5px -5px 5px 5px #888;
}
.testClass{
    width: 100px;
}
</style>
</head>
<body>
<form id="frmOnScreenKeyboard" name="frmOnScreenKeyboard">  

<table border="0" cellpadding="0" cellspacing="0" >
<tr>
    <td>
        <input type="text" name="txtTest1" id="txtTest1"/>
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="txtTest2" id="txtTest2"/>      
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="txtTest3" id="txtTest3"/>      
    </td>
</tr>

<tr>
    <td>
        <input type="button" name="butButton1" id="butButton1"/>
    </td>
</tr>

<tr>
    <td>
        <input type="password" name="txtpassword1" id="txtpassword1"/>
    </td>
</tr>
<table>


<table height="900px">
</table>

<div id="keyboard">
    <table border=1 cellpadding=0 cellspacing=0>
        <tr>
            <td>
                <div id="row2_shift">
                    <table border=1 cellpadding=0 cellspacing=0>
                    <tr>                                
                        <td><input name="a" type="button" value="A" class="testClass" /></td>
                        <td><input name="s" type="button" value="S" class="testClass" /></td>
                        <td><input name="d" type="button" value="D" class="testClass" /></td>                                                           
                    </tr>
                    </table>
                </div>
            </td>
        </tr>               
    </table>        
</div>

</form>
</body>
</html>

When I use this code,

alert($(this).attr('class'));

I still get undefined message. Please guide me again, Thank to all.

http://stackoverflow.com/questions/2400386/get-class-name-using-jquery — max4ever, Sep 30 '11 at 09:23
I finally found out that it already have not class which is why i cannot do it. Thank you everybody who give me answer back. — Frank Myat Thu, Sep 30 '11 at 10:07

KutePHP · Answer 1 · 2011-09-30T10:06:54.807

Try this -

$(this).attr('class');

EDIT This happens when the element does not have the class. You can check if the element has class as -

alert($(this).hasClass('classname'));

EDIT2

I added your code to JSFiddle and on focus out of first text box, you can see an alert with class name. Most important thing I observed is, none of your text inputs have a class attribute.

You can test at : http://jsfiddle.net/njJEg/4/

Arief · Answer 2 · 2011-09-30T10:01:25.363

$('.test').click(function() {
    alert($(this).attr('class'));
});

jQuery .attr('class') will get the value of class attribute. However if the element doesn't have class attribute it will return undefined so make sure you have the class attribute set otherwise you can always check first using the following code:

if($(this).hasClass('yourClassValue')) {
    var myClass = $(this).attr('class');
    // then do whatever you want with the class here
}

the alert(..) is just to prompt if you actually get the correct value, you can delete this usage of course when you get what you want.

score 0 · Answer 3 · answered Sep 30 '11 at 10:02

0

    $('.test').click(function() {
       if($(this).hasClass('classnameyouarelookingfor')){
        alert($(this).attr('class'));
     }
    });

answered Sep 30 '11 at 10:02

coolguy

7,866
9
45
71

Click button, display css class name

3 Answers3