jQuery需要将标题重新附加到元素onClick

Question

我正在使用以下 jQuery 代码：

$(document).ready(function() {
    $('a[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
    $('[data-title]').click(function(e) {
        e.preventDefault();
        $this = $(this);
        $this.attr('title', $this.data('title'));
        $this.removeAttr('data-title');
        $(this).click();
    });
});

此代码的原因是仅在将鼠标悬停在<a>标签上时从title标签中删除title属性，因为我碰巧需要这个名为mediaboxadvanced的插件的标题属性，因为它使用标题属性作为图片弹出窗口的标题，这就是我想要的。我在悬停时将标题属性存储在数据标题中的原因是因为我不希望 HTML 标记显示在标题中并且无法找到删除此 HTML 标记的解决方案（这很难看) 通过工具提示（来自 title 属性）显示。因此，话虽如此，我认为我们根本不需要工具提示，但我无法从data-title 属性 onclick 重新分配 title 属性。

实际上，如果我们能够在点击事件发生之前以某种方式将其分配回<a> 标签，那就太好了，这就是我在上面的代码中尝试做的事情。但是由于某种原因，这里没有分配 title 属性...

Answer 1

有两点

1. 没有与a 元素关联的data-title 属性，您只有title 属性。所以你需要改变选择器
2. 您正在触发click 处理程序中的单击处理程序，并触发无限递归，从而导致Maximum recursion depth exceeded now 错误

更新：
不需要所有这些东西，该插件使我们可以使用linkmapper 对其进行扩展。

在你拥有的插件文件的底部

Mediabox.scanPage = function() {
//  if (Browser.Platform.ios && !(navigator.userAgent.match(/iPad/i))) return;  // this quits the process if the visitor is using a non-iPad iOS device (iPhone or iPod Touch)
//  $$('#mb_').each(function(hide) { hide.set('display', 'none'); });
    var links = $$("a").filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
    });
//  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    links.mediabox({/* Put custom options here */}, null, function(el) {
        var rel0 = this.rel.replace(/[\[\]|]/gi," ");
        var relsize = rel0.split(" ");
//      return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));

        var relsearch = "\\["+relsize[1]+"[ \\]]";
        var relregexp = new RegExp(relsearch);
        return (this == el) || ((this.rel.length > 8) && el.rel.match(relregexp));
    });
};

改成

Mediabox.scanPage = function() {
//  if (Browser.Platform.ios && !(navigator.userAgent.match(/iPad/i))) return;  // this quits the process if the visitor is using a non-iPad iOS device (iPhone or iPod Touch)
//  $$('#mb_').each(function(hide) { hide.set('display', 'none'); });
    var links = $$("a").filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
    });
//  $$(links).mediabox({/* Put custom options here */}, null, function(el) {
    links.mediabox({/* Put custom options here */}, function(el) {
    //This is the linkmapper function
        elrel = el.rel.split(/[\[\]]/);
        elrel = elrel[1];
        return [el.get('href'), $(el).data('title'), elrel];    // thanks to Dušan Medlín for figuring out the URL bug!
    }, function(el) {
        var rel0 = this.rel.replace(/[\[\]|]/gi," ");
        var relsize = rel0.split(" ");
//      return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));

        var relsearch = "\\["+relsize[1]+"[ \\]]";
        var relregexp = new RegExp(relsearch);
        return (this == el) || ((this.rel.length > 8) && el.rel.match(relregexp));
    });
};

然后在标记中使用data-title 属性而不是使用title 来指定标题

演示：Plunker

Answer 2

尝试将您的选择器从 $('[data-title]') 更改为 $('a[title]')。