0

我一直在尝试创建一个动态 jQuery 图像库，当用户单击链接时不需要将其带到新的目的地。可以在这里找到 - http://the-session.co.uk/JSgallery/

我创建了showPic一个接受 2 个参数的函数 - 事件对象和一个元素节点对象（一个特定的元素，用 . 类单击link)。source变量使用该.attr()方法并充当“getter”来获取src元素的属性节点传递给showPic函数。

然后我将其存储<img id="placeholder">在一个名为gallery. 然后的想法是将src属性设置gallery为srcfromsource变量。

然后我已经使用event.preventDefault();了，以便不会触发事件的默认操作。然而， elements他们仍在将用户带到一个不希望的新目的地。

最后一步是选择.link（<a>元素）然后使用该.on方法，以便在用户单击时调用匿名函数。然后调用该showPic函数，并将使用单击的特定元素传递给它$(this)。

目前代码不起作用，我不明白为什么。有什么建议么？

function showPic (event, el) {
    var source = el.attr('source'); // getter
    var gallery = $('#placeholder'); // <img id="placeholder">
    gallery.attr('src', source); // setter
    event.preventDefault();
}

$('.link').on('click', function() {  
        showPic($(this));
});
4

3 回答 3

1

当在这样的函数中时，您还需要传递事件：

function showPic (event, el) {
    event.preventDefault();
    $('#placeholder').attr('src', el.attr('source'));
}

$('.link').on('click', function(event) {  
    showPic(event, $(this));
});

另一方面，如果您直接引用该函数，则将传递事件，并且您可以使用 event.target 来获取单击的元素，如果这与绑定的元素相同：

function showPic (event) {
    event.preventDefault();
    $('#placeholder').attr('src', $(event.target).attr('source'));
}

$('.link').on('click', showPic);
于 2013-01-28T10:16:54.790 回答
0

你错过了第一个参数，，

$('.link').on('click', function(e) {  
    showPic(e,$(this));
});
于 2013-01-28T10:16:20.000 回答
0

你的 showPic 函数有两个参数 event 和 el

但是您只是将元素传递给 showPic 并且在 showPic 中，此元素存储在事件参数中。

将您的代码更新为以下内容：

$('.link').on('click', function(event) {  
        showPic(event, $(this));
});
于 2013-01-28T10:17:40.857 回答