qtip jquery插件以显示链接中的文本

问题描述

我正在尝试使用jQuery qTip插件在元素内显示文本.

I am trying to use the jQuery qTip plugin to display the text inside the element.

我在一个表中有多个链接，就像使用不同的类一样.链接中的文本被隐藏，带有一个负的文本缩进，并使用背景精灵来使它们看起来唯一.

I have multiple links in a table like so with different classes. The text in the links is hidden with a negative text indent and a background sprite is used to make them look unique.

<a href="#" class="spot_quote">Spot quote</a>

<a href="#" class="contract_quote">Contract quote</a>

我以为这将使jquery只需提取链接中的文本:

I thought this would jquery would just pick up the text in the link:

$('.contract_quote, .spot_quote').qtip(
   {
       content: $(this).text() // Give it some content, in this case a simple string
   });

但是它返回的方式比我需要或想要的更多.我真的不想添加title属性，因为这里不需要.

But it returns way more than i need or want. I don't really want to add the title attribute as it is not needed here.

推荐答案

JavaScript没有块级范围.这意味着您的this引用了该文档.为了使this引用每个元素，您需要创建一个新函数:

JavaScript has no block-level scope. That means that your this refers to the document. In order for this to refer to each element, you need to create a new function:

$(document).ready(function() {
  $('.contract_quote .spot_quote').each(function() {
    $(this).qtip({
     content: $(this).text();
    });
  });
});

也就是说，即使您需要title属性，还是要设置它还是一个好习惯.使用JavaScript自动设置它是可以的，但并不理想.使用CMS进行设置(如果使用的话)会更好.如果用户代理由于某种原因正在寻找链接的标题，那么最好有一个链接，即使它始终与内容相同，因为用户代理并不像人类那样聪明.无论如何，大多数时候都是如此.

That said, even if you'd need the title attribute, it would be good practice to set it anyway. Setting it automatically with JavaScript is OK but not ideal. Setting it with your CMS (if you use one) would be better. If a user agent, for some reason, is looking for the title of the link, it's just better to have one, even if it's always the same as the content, as user agents are not as smart as humans. Most of the times, anyway.

这篇关于qtip jquery插件以显示链接中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！