버튼을 클릭하면 CSS 클래스 이름이 표시됩니다.

버튼을 클릭하면 (예 : 입력 유형 = "버튼"클래스 = "테스트"), 스타일 시트 클래스 이름을 표시하고 싶습니다.버튼을 클릭하면 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'));

난 아직 정의되지 않은 메시지가 나타납니다. 다시 안내해주십시오. 감사합니다.

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

편집 요소가 클래스를 가지고 있지 않을 때 발생 -

출처

2011-09-30 Frank Myat Thu

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

드디어 이미 내가 그것을 할 수없는 이유입니다 클래스를하지 않은 것을 발견했다. 나에게 대답을 돌려 준 모두 감사합니다. –

이를보십시오. 요소가 같은 클래스가있는 경우, 당신은 확인하실 수 있습니다 -

EDIT2

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

내가 JSFiddle과 첫 번째 텍스트 상자의 초점이에 코드를 추가, 당신은 클래스 이름과 경고를 볼 수 있습니다. 내가 관찰 한 가장 중요한 것은 텍스트 입력에 클래스 속성이 없다는 것입니다. http://jsfiddle.net/njJEg/4/

출처

2011-09-30 09:23:35 KutePHP

감사합니다. –

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

jQuery를 .attr('class') 클래스 속성의 값을 얻을 것이다 :

당신은에서 테스트 할 수 있습니다. alert(..) 그냥 실제로하면 메시지를 표시하는 것입니다

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

: 요소가이 undefined를 반환합니다 속성 클래스가없는 그러나 그래서 만약 당신이 항상 다음 코드를 사용하여 첫 확인할 수 있습니다 그렇지 않으면 설정 클래스 속성이 있는지 확인 올바른 값을 얻으면 원하는 것을 얻을 때 물론이 사용법을 삭제할 수 있습니다.

출처

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 클래스 이름이 표시됩니다.

답변

관련 문제