제목 텍스트를 클릭하여 글꼴 전환 효과를 만드는 방법

이번에는 제목 텍스트를 클릭하여 글꼴을 전환하는 효과를 만드는 방법을 보여 드리겠습니다. 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

주로 클릭한 요소의 하위 요소에 b 요소가 포함되어 있는지 확인하여 글꼴을 전환합니다. 이 함수는 $author 요소 내에 b 태그를 추가하는 것입니다. 일반 글꼴로 다시 전환하려면 콘텐츠를 일반 텍스트로 변환한 다음 요소 콘텐츠를 바꾸면 됩니다.

핵심 코드는 다음과 같습니다.

$('#f-author').css('cursor','pointer');
$('#f-author').click(function(event){
  var $author = $(this);
  if(!$author.children().is('b')){//子元素没有b
    $author.wrapInner('<b></b>');//包含在$author里面
  }
  else{
    var text = $author.text(); //纯文本
    $author.text(text);
  }
});

전체 코드는 다음과 같습니다.

这里显示测试标题文字
<script>
$('#f-author').css('cursor','pointer');
$('#f-author').click(function(event){
  var $author = $(this);
  if(!$author.children().is('b')){//子元素没有b
    $author.wrapInner('&lt;b&gt;&lt;/b&gt;');//包含在$author里面
  }
  else{
    var text = $author.text(); //纯文本
    $author.text(text);
  }
});
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사를 참고하세요. PHP 중국어 웹사이트!

추천 도서:

패키징 파일 경로 구성 오류 해결 방법

r.js CSS 파일 작동 방법

위 내용은 제목 텍스트를 클릭하여 글꼴 전환 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!