javascript - 在 title 属性中添加按钮链接 - HTML

Question

我使用的是 Wordpress 灯箱插件，“标题”属性指定了灯箱内的描述。这是我使用的插件示例的样子:

<a href="link.to.video" class="wplightbox" title="The description video">Video</a>

是否可以在上述代码的 title 属性中包含一个按钮作为链接？这在 HTML 中可能吗？

Answer 1

不可能在标题属性中放置文本以外的任何内容:

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth. The value is text.

来源:https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-title-attribute

您需要查看 WP 插件的选项以找到一种方法来完成您需要的操作，或者，如果插件不提供此类选项，请将其更改为另一个提供的选项。

后期编辑:快速搜索后，似乎没有 WP 灯箱插件提供显示一些 HTML 代码作为描述的可能性。

如果是这种情况，则需要一些自定义代码。我会使用这个程序:

• 使用链接作为标题，例如:http://example.com/page

• 在灯箱显示上(这应该是 js 插件中的一个事件)，使用 js/jQuery 将任何以 http:// 开头的标题转换为按钮

这是 jQuery 的代码:

/**
* This code should be run after the lightbox is displayed
*/

//get the titles from the lightbox / lightboxes - use the appropriate selector
var titleTag = $('.title');

//go over all the titles selected and replace the URLs with <a> tags
titleTag.each(function(){
  url = findRegex($(this).text());
  if ( url !== false ) {
    $(this).html('<a href="' + url + '" class="button">Button</a>');
  }
});

//function to find an URL in a string 
//returns false if no URL in the string 
function findRegex( str ) {
  var regex = /^(https?:\/\/)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*\/?$/g;
  let m;
  var found = false;
  while ((m = regex.exec(str)) !== null) {
      // This is necessary to avoid infinite loops with zero-width matches
      if (m.index === regex.lastIndex) {
          regex.lastIndex++;
      }

      found = m[0];
  }
  
  return found;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="title">http://example.com/page</div>

<div class="title">Normal title</div>