這次帶給大家jQuery實作點擊標題文字切換字體步驟詳解,jQuery實作點擊標題文字切換字體的注意事項有哪些,以下就是實戰案例,一起來看一下。
這個主要透過判斷被點擊的元素的子元素中是否包含了b元素來進行字體的切換,其中wrapInner函數是為了在$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); } });
完整程式碼如下:
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('<b></b>');//包含在$author里面 } else{ var text = $author.text(); //纯文本 $author.text(text); } }); </script>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是jQuery實作點擊標題文字切換字體步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!