1

我正在使用以下 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();
    });
});

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

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

4

2 回答 2

1

有两点

  1. 没有data-title与元素关联的属性a，您只有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));
    });
};

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

演示：Plunker

于 2013-06-04T03:06:52.450 回答
0

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

于 2013-06-04T03:03:25.670 回答