How to use jQuery to switch fonts by clicking on title text

This time I will show you how to use jQuery to switch the font by clicking on the title text, and what are the precautions for using jQuery to switch the font by clicking on the title text. The following 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:

Node.js console output log file example analysis

How to use Vue to achieve drag and drop effect

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