单击按钮，显示CSS类名称

当我单击按钮（例如输入类型=“按钮”class =“test”），我想显示样式表类名称。单击按钮，显示CSS类名称

我已经试过这样。

$(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'));

我还是得到了一个未定义的消息。请再次指导我，谢谢大家。

来源

2011-09-30 Frank Myat Thu

http://stackoverflow.com/questions/2400386/get-class-name-using-jquery – max4ever

我终于发现它已经没有类，这是为什么我不能做到这一点。谢谢大家谁给我回答。 –

试试这个 -

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

编辑这种情况发生在元素没有的类。您可以检查元素有类如 -

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

EDIT2

我加入你的代码的jsfiddle和焦点了第一个文本框，你可以看到使用类名称的警报。我观察到的最重要的事情是，您的任何文本输入都没有类属性。

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

来源

2011-09-30 09:23:35 KutePHP

我感谢你的辛勤工作。 –

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

jQuery的.attr('class')将获得class属性的值。但是，如果元素没有类属性将返回undefined所以一定要确保你有类属性的设置，否则可以随时查询首先使用下面的代码：

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

的alert(..)只是，如果你确实提示获得正确的价值，当你得到你想要的东西时，你可以删除这个用法。

来源

2011-09-30 09:25:15 Arief

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

来源

2011-09-30 10:02:21 coolguy

单击按钮，显示CSS类名称

回答

相关问题