"JQuery 버튼 텍스트 변경"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-== 참고 자료 == +==참고==))
잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
5번째 줄: 5번째 줄:
==방법: button 태그는 html()==
==방법: button 태그는 html()==
*예제: http://zetawiki.com/ex/jquery/change-button-text.html
*예제: http://zetawiki.com/ex/jquery/change-button-text.html
<source lang='html5'>
<syntaxhighlight lang='html5'>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
<script>
21번째 줄: 21번째 줄:
   
   
<button id='button1'>접기</button>
<button id='button1'>접기</button>
</source>
</syntaxhighlight>


==방법: input 태그는 val()==
==방법: input 태그는 val()==
*http://zetawiki.com/ex/jquery/change-button-text2.html
*http://zetawiki.com/ex/jquery/change-button-text2.html
<source lang='html5'>
<syntaxhighlight lang='html5'>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
<script>
41번째 줄: 41번째 줄:
   
   
<input type='button' value='접기' id='button1' />
<input type='button' value='접기' id='button1' />
</source>
</syntaxhighlight>


==같이 보기==
==같이 보기==

2020년 11월 2일 (월) 02:53 판

jQuery 버튼 텍스트 변경
jQuery 버튼 텍스트 바꾸기

1 방법: button 태그는 html()

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  $('#button1').click( function() {
    if( $(this).html() == '접기' ) {
      $(this).html('펼치기');
    }
    else {
      $(this).html('접기');
    }
  });
});
</script>
 
<button id='button1'>접기</button>

2 방법: input 태그는 val()

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  $('#button1').click( function() {
    if( $(this).val() == '접기' ) {
      $(this).val('펼치기');
    }
    else {
      $(this).val('접기');
    }
  });
});
</script>
 
<input type='button' value='접기' id='button1' />

3 같이 보기

4 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}