Home  >  Article  >  Web Front-end  >  Detailed explanation of the steps to switch fonts by clicking on title text using jQuery

Detailed explanation of the steps to switch fonts by clicking on title text using jQuery

php中世界最好的语言
php中世界最好的语言Original
2018-05-15 11:19:092130browse

This time I will bring you jQuery A detailed explanation of the steps to switch fonts by clicking on the title text. What are the precautions for jQuery to switch fonts by clicking on the title text. The following is a practical case. Get up and take a look.

This mainly switches the font by determining whether the sub-element of the clicked element contains a b element. The wrapInner function is to add the b tag inside the $author element.

Switching back to the normal font is achieved by converting the content into plain text and then replacing the element content.

The core code is as follows:

$('#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);
  }
});

The complete code is as follows:





www.jb51.net jQuery点击标题切换字体



这里显示测试标题文字

<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>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

Vue implements the steps to implement the PopupWindow component

JS implements the transparency gradient function

The above is the detailed content of Detailed explanation of the steps to switch fonts by clicking on title text using jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn