当我点击按钮时(例如输入类型=“按钮”类=“测试”), 我想显示样式表类名。
我已经尝试过了。
$(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'));
我仍然得到未定义的消息。 请再次指导我,谢谢大家。
答案 0 :(得分:6)
试试这个 -
$(this).attr('class');
修改强> 当元素没有类时会发生这种情况。您可以检查元素是否具有类 -
alert($(this).hasClass('classname'));
<强> EDIT2 强>
我将您的代码添加到JSFiddle,并在第一个文本框的焦点上,您可以看到带有类名的警报。我观察到的最重要的事情是,你的文本输入都没有类属性。
进行测试答案 1 :(得分:2)
$('.test').click(function() {
alert($(this).attr('class'));
});
jQuery .attr('class')
将获得class属性的值。但是,如果元素没有class属性,它将返回undefined
,因此请确保您已设置class属性,否则您始终可以使用以下代码进行检查:
if($(this).hasClass('yourClassValue')) {
var myClass = $(this).attr('class');
// then do whatever you want with the class here
}
alert(..)
只是提示你是否真的得到了正确的值,当你得到你想要的东西时,你可以删除这种用法。
答案 2 :(得分:0)
$('.test').click(function() {
if($(this).hasClass('classnameyouarelookingfor')){
alert($(this).attr('class'));
}
});