利用jQuery實作WordPress中@的ID懸浮顯示評論內容_jquery

例如: A 留言了, B 用 @ 回覆了 A, 所以 B 的回覆可能是這樣的:

@A
How much money do you have?

是說, 當滑鼠懸停在 @A 上面的時候, 就會將 A 的評論內容顯示在一個懸浮區域中.

實現步驟
在這裡我們將以iNove主題為例來講解。
1. 將以下程式碼儲存為commenttips.js：

jQuery(document).ready(
 function(){
 var id=/^#comment-/;
 var at=/^@/;
 jQuery('#thecomments li p a').each(
  function() {
  if(jQuery(this).attr('href').match(id)&& jQuery(this).text().match(at)) {
   jQuery(this).addClass('atreply');
  }
  }
 );
 jQuery('.atreply').hover(
  function() {
  jQuery(jQuery(this).attr('href')).clone().hide().insertAfter(jQuery(this).parents('li')).attr('id','').addClass('tip').fadeIn(200);
  }, 
  function() {
  jQuery('.tip').fadeOut(400, function(){jQuery(this).remove();});
  }
 );
 jQuery('.atreply').mousemove(
  function(e) {
  jQuery('.tip').css({left:(e.clientX+18),top:(e.pageY+18)})
  }
 );
 }
)

2. 將 commenttips.js 檔案放置到 inove/js 目錄.

3. style.css 中追加樣式程式碼如下:

#thecomments .tip {
 background:#FFF;
 border:1px solid #CCC;
 width:605px;
 padding:10px !important;
 padding:10px 10px 0;
 margin-top:0;
 position:absolute;
 z-index:3;
}
#thecomments .tip .act {
 display:none;
}
*+html #thecomments .tip {
 padding:10px 10px 0 !important;
}

4. 在主題中加入程式碼呼叫 JavaScript. 開啟 templates/end.php, 在