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

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:

nbsp;html>


<meta>
<title>www.jb51.net jQuery点击标题切换字体</title>
<script></script>


<p>这里显示测试标题文字</p>
<script>
$(&#39;#f-author&#39;).css(&#39;cursor&#39;,&#39;pointer&#39;);
$(&#39;#f-author&#39;).click(function(event){
  var $author = $(this);
  if(!$author.children().is(&#39;b&#39;)){//子元素没有b
    $author.wrapInner(&#39;<b>&#39;);//包含在$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!