Question

我有一个需要在弹出窗口中打开的共享图标和网址列表，即：facebook，twitter等。

我有一个jQuery popupWindow函数，我不记得我找到了什么，但它需要以下设置列表：

$.fn.popupWindow.defaultSettings = {
    centerBrowser:0,
    centerScreen:0,
    height:500,
    left:0,
    location:0,
    menubar:0,
    resizable:0,
    scrollbars:0,
    status:0,
    width:500,
    windowName:null,
    windowURL:null,
    top:0,
    toolbar:0
};

所以我可以简单地传递高度和宽度以及中心以获得一个非常好的弹出窗口，以便像这样分享：

$(element).popupWindow({ 
    centerBrowser: 1,
    width: 500,
    height: 250 
});

我遇到的问题是我无法访问链接的数据属性，以便将高度和宽度传递给popover方法。

我的链接类似于：

<a href="http://www.facebook.com/sharer.php?etc" 
    class="social-share facebook" 
    data-width="550" 
    data-height="275">Share on Facebook</a>

尝试：

$('.social-share').popupWindow({ 
    centerBrowser: 1,
    height: $(this).attr('data-height'),
    width: $(this).attr('data-width')
});

这只是忽略脚本并在同一窗口中转到FB。

尝试：

$('.social-share').popupWindow({ 
    centerBrowser: 1,
    height: this.attr('data-height'),
    width: this.attr('data-width')
});

对象没有属性attr。

在popupWindow函数中，他们编写了一些首先选择元素属性的覆盖，然后回退到这样的设置：

settings.windowName = this.name || settings.windowName;
settings.windowURL = this.href || settings.windowURL;

我的想法是，这是最优雅和功能性的解决方案，因此会有三重回退，首先看看是否有data-width和data-height属性，然后检查传入的设置，然后使用默认设置。

但是，唉，我似乎无法让它工作。

我尝试添加两者：

settings.width = $(this).attr('data-width') || settings.width;
settings.height = $(this).attr('data-height') || settings.height;

这对高度或宽度没有影响，只使用默认值。

并尝试：

settings.width = this.attr('data-width') || settings.width;
settings.height = this.attr('data-height') || settings.height;

此抛出错误对象没有属性attr。

HELP！

Answer 1

试试这个不要频繁访问DOM，而是尝试使用 .data() 执行此操作我想问题是您缺少添加 units

$('.social-share').popupWindow({ 
    centerBrowser: 1,
    height: this.data('height') + 'px',
    width:  this.data('width') + 'px'
});

将数据属性从锚元素传递到jQuery函数

1 个答案: