Click button, display css class name_问答_开发者

开发者 https://www.devze.com 2023-04-09 06:44 出处：网络

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

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').hei开发者_Go百科ght()) - 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.

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/

$('.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.

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

Click button, display css class name

精彩评论

关注公众号

热门标签

图文推荐

Click button, display css class name

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：