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，因为它不在范围内。只需处理title属性两次或使用其他属性。

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

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

1 个答案: