Click button, display css 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'));
}
});
加载中,请稍侯......
精彩评论