jQuery qTip 插件，如何拆分'title'属性和应用样式

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');
           }
        }
    }
});