How to create the effect of switching fonts by clicking on the title text

This time I will show you how to make the effect of clicking on the title text to switch the font, and what are the precautions. Here is a practical case, let's 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:

这里显示测试标题文字
<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. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

How to solve the error in configuring the packaging file path

How to operate css files with r.js

The above is the detailed content of How to create the effect of switching fonts by clicking on the title text. For more information, please follow other related articles on the PHP Chinese website!