点击按钮，显示css类名答案

【问题标题】：Click button, display css class name点击按钮，显示css类名
【发布时间】：2011-10-01 06:13:48
【问题描述】：

当我点击按钮时（例如，input type="button" class="test"），我想显示样式表类名。

我已经试过这样了。

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

但我只收到未定义的消息。请告诉我如何获得它。

@@编辑

让我向你展示我的编码。

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

当我使用这段代码时，

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

我仍然收到未定义的消息。请再次指导我，谢谢大家。

【问题讨论】：

stackoverflow.com/questions/2400386/get-class-name-using-jquery
我终于发现它已经没有类了，这就是我做不到的原因。谢谢所有给我回复的人。

标签： javascript jquery html dom

【解决方案1】：

试试这个 -

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

编辑当元素没有类时会发生这种情况。您可以检查元素是否具有类 -

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

EDIT2

我将您的代码添加到 JSFiddle 并在第一个文本框之外的焦点上，您可以看到带有类名的警报。我观察到的最重要的事情是，您的文本输入都没有类属性。

您可以在http://jsfiddle.net/njJEg/4/进行测试

【讨论】：

【解决方案2】：

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

jQuery .attr('class') 将获取类属性的值。但是，如果元素没有 class 属性，它将返回 undefined，因此请确保您设置了 class 属性，否则您始终可以先使用以下代码进行检查：

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

alert(..)只是提示你是否真的得到了正确的值，当你得到你想要的东西时，你当然可以删除这个用法。

【讨论】：

【解决方案3】：

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

【讨论】：