jQuery的qTip插件，如何分割「標題」屬性和應用樣式

Question

我嘗試使用qTip jQuery插件在這裏：http://craigsworks.com/projects/qtip2/demos/#mouse

我的代碼基礎上的演示工作，但我想能夠從TITLE屬性中「爆炸」內容，並將數組的第一項作爲「標題」，將第二項作爲「內容」。

我有以下代碼：

<script> 
$(document).ready(function() 
{ 

    $('.tip3').qtip({ 
     content: { 
      text: function(api) { 
        var titleAttr = $(this).attr('title'); 
        var titleAttrArray = titleAttr.split(' :: '); 
        return titleAttrArray[1]; 
       }, 
      title: { 
       text: function(api) { 
        // Retrieve content from TITLE attribute of the $('.selector') element 
        // return $(this).attr('title'); 
        return titleAttrArray[0]; 
       } 
      } 
     }, 
     position: { 
     my: 'top left', 
     target: 'mouse', 
     viewport: $(window), // Keep it on-screen at all times if possible 
     adjust: { 
      x: 10, y: 10 
     } 
     }, 
     hide: { 
     fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking! 
     }, 
     style: 'ui-tooltip-youtube' 
    }); 

}); 
</script> 


<div class="box tip3" title="Some cool title here! :: Some subheader here?"> 
    <h3>Hover over this box to see mouse tracking in action</h3> 
</div> 

僅供參考，下面的代碼的工作原理是剛取TITLE完美的罰款，並沒有做任何事情與它：

<script> 
$(document).ready(function() 
{ 
    $('.tip2').qtip({ 
     content: { 
      text: 'I really like owls!', 
      title: { 
       text: function(api) { 
        // Retrieve content from TITLE attribute of the $('.selector') element 
        return $(this).attr('title'); 
       } 
      } 
     }, 
     position: { 
     my: 'top left', 
     target: 'mouse', 
     viewport: $(window), // Keep it on-screen at all times if possible 
     adjust: { 
      x: 10, y: 10 
     } 
     }, 
     hide: { 
     fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking! 
     }, 
     style: 'ui-tooltip-youtube' 
    }); 

}); 
</script> 

任何想法/見解會太棒了！仍然是一個嘗試將jQuery繪製出來的新手:)。

Answer 1

您不能在標題函數中訪問titleAttrArray，因爲它不在範圍內。只需處理標題屬性兩次或使用其他屬性。

$('.tip3').qtip({ 
    content: { 
     text: function(api) { 
      return $(this).attr('title').split(' :: ')[1]; 
     }, 
     title: { 
      text: function(api) { 
       return $(this).attr('title').split(' :: ')[0]; 
       //OR 
       return $(this).attr('title_header'); 
      } 
     } 
    } 
});