Question

我有一个目前正在使用的脚本，问题是我必须在每个html img标签后直接添加脚本。因此，整个站点的几个不同位置都有相同的脚本。我想知道是否可以将这个脚本包装在一个简单的函数调用中，我可以在整个站点中添加该函数而不是整个脚本。

编辑：我应该提到。这是Tumblr主题的灯箱。 photo_ {PostID}有效。 photo_ {PostID}检索唯一的照片标识符，以便灯箱显示正确的图像。这个剧本现在100％完美无缺，毫无疑问。我想把它全部变成一个简单的1个线程调用函数，而不需要在每个img标记之后粘贴脚本。脚本在下面，谢谢。

    <script class="inline_embed" type="text/javascript">
        var domain = document.domain,
        photo_{PostID} = [{
            "width": "{PhotoWidth-HighRes}",
            "height": "{PhotoHeight-HighRes}",
            "low_res": "{PhotoURL-250}",
            "high_res": "{PhotoURL-HighRes}"
        }];

        function event_is_alt_key(e) {
            return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
        };

        document.getElementById('photo_{PostID}').onclick = function (e) {
            if (event_is_alt_key(e)) return true;
            window.parent.Tumblr.Lightbox.init(photo_{PostID});
            return false;
        }
    </script>

Answer 1

您使用[jquery]标记了此问题，因此即使您的示例代码没有使用它，我也会使用jquery给出答案。

这是一个小提琴： http://jsfiddle.net/u2f2b5qq/

给出页面上的一些图像，如下所示：

<img src="http://placehold.it/250x150">
<img src="http://placehold.it/200x250">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/150x50">

一旦页面加载，您就可以对所有这些操作执行某些操作，如下所示：

$(function() {
    $('img').each(function() {
        $(this).on('click', function() {
            alert('You clicked ' + $(this).attr('src'));
            // window.parent.Tumblr.Lightbox.init(this);
        });
    });
});

我所做的是为每张图片附加一个click处理程序，并在点击后alert附加<img src="example.jpg" id="photo_{PostID}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-low_res="{PhotoURL-250}" data-high_res="{PhotoURL-HighRes}" />。您可以使用灯箱代码替换它。

我没有完全理解tumblr如何通过插值这些值来实现其魔力，但我认为你可以为每个图像做这样的事情。它将Photo数据附加到每个图像元素，然后稍后检索它。

$(function() {
    $('img').on('click', function() {
        var $img = $(this);
        alert('You clicked ' + $img.attr('src'));
        window.parent.Tumblr.Lightbox.init({
            width: $img.data('width'),
            height: $img.data('height'),
            low_res: $img.data('low_res'),
            high_res: $img.data('high_res')
        });
    });
});

然后在jquery开球时：

{{1}}

试一试。

在调用函数中包装脚本

1 个答案: