当传递参数给jquery插件时，如何为javascript对象指定一个变量属性

How to specify a variable property for a javascript object when passing arguments to a jquery plugin

本文关键字：对象 属性 变量 一个 javascript 参数 jquery 插件      更新时间：2023-09-26

我正在我的网站上实现这个jQuery图像缩放器。它的工作原理是我有这样的HTML标记:(Fiddle)

<a class="zoom" href="bigimage.jpg">
    <img src="smallimage.jpg" />
</a>

然后我需要像这样激活插件:(注意插件是在图像的父容器上调用的，在这种情况下是<a>标签，而不是图像本身)

$(function() {
    $('a.zoom').zoom({url: 'bigimage.jpg'});
});

正如你所看到的，我已经在激活代码中指定了大图的url。是否有一种方法来获得大图像url从图像的父的href，或者也许在html中的data-bigimage属性?

E。

$('a.zoom').zoom({
    url: $(this).attr('href') // or $(this).data('bigimage')
});

这显然不起作用，但希望表明需要什么

如果没有url参数，插件会首先查找data-src属性，所以你可以这样做:http://jsfiddle.net/3ktNJ/33/

将大图的URL放在data-src属性中:

<a class="zoom">
    <img data-src="http://placekitten.com/400/600" src="http://placekitten.com/200/300" />
</a>
<br>
<a class="zoom">
    <img data-src="http://placekitten.com/500/700" src="http://placekitten.com/200/300" />
</a>

调用不带URL参数的函数:

$('a.zoom').zoom();

如果你在那里没有工作，你可以尝试:

$(function(){
    $('a.zoom').each(function(){
        var thisURL = $(this).attr('href');
        $(this).zoom({url: thisURL});
    });
}

你的小提琴在这里更新:http://jsfiddle.net/3ktNJ/1/

UPDATE每个OP请求，对插件进行了小更改。这并不影响插件的正常使用:

本节已编辑:

if (!settings.url) {
    $urlElement = $source.find('img');
    if ($urlElement[0]) {
        settings.url = $urlElement.data('src') || $urlElement.attr('src');
    }
    if (!settings.url) {
        return;
    }
}

对此:你会注意到我在这里添加了一个额外的'if'语句来遍历URL管理器。我仍然不确定为什么!settings.url说假，即使它输出一个真正的URL字符串…但这似乎有效。

if (!settings.url) {
    if ($(target).attr('href')) {
        settings.url = $(target).attr('href');
    } else {
        $urlElement = $source.find('img');
        if ($urlElement[0]) {
            settings.url = $urlElement.data('src') || $urlElement.attr('src');
        }
        if (!settings.url) {
            return;
        }
    }
}
作为一个额外的奖励，专门为您的需要，您不必提供小图像的父href源。如果您不提供URL，它将自动抓取并使用它。您将注意到，在提琴的底部，它没有发送任何URL，但它仍然按计划工作。然后，如果您删除<a>中的href，它将像以前一样正常工作(这无论如何都不理想)。

我希望这对你有帮助!

如果我理解正确…你想要得到图像的父div的href。这应该能奏效:

$("img").parent(".zoom").attr("href");

我将它添加到您的小提琴的顶部行:http://jsfiddle.net/mN7m3/

相关文章：