Question

这是我的javascript：

function scrollTo(position) {
    $('body').animate({
        scrollTop: position
    }, 500);
}

var titles = $('.title');
for(var i = 0; i < titles.length; i++) {
    titles[i].click(function() {
        console.log('click');
        scrollTo(0);
    });
}

它应该选择所有三个标题并应用一个点击监听器，将页面滚动回顶部。不幸的是，我没有在控制台中收到消息，也没有滚动。

我在网上看到的所有地方都给出了与此类似的循环，以便将点击监听器应用于多个JQuery对象，但由于某种原因，它不能为我工作。我担心我可能犯了一个愚蠢的错误，但我无法找到它。

Answer 1

你的代码无效的原因是因为这行

titles[i].click(function() {

当您使用索引访问jQuery对象时，您在技术上正在访问DOM元素而不是jQuery对象。并且DOM对象没有click方法。如果您打开控制台，则会看到错误。如果您仍想使用for循环，则必须先将其转换为jQuery对象。

$(titles[i]).click(function() {

如果您愿意这样做，它将按预期工作。

此外，如果您仍然不想对其进行双重包装，您也可以使用.eq从数组中获取jQuery对象。

titles.eq(i).click(function() {

您无需迭代jQuery对象来分配事件处理程序。你可以在一行中完成它。

$('.title').click(function() {
    console.log('click');
    scrollTo(0);
 });

同时检查您正在使用的jQuery版本，如果是最新版本，则可以使用on

$('.title').on('click', function() {

此外，您还需要确保在关联事件时页面上存在类title的元素。

Answer 2

你可以使用它，应该给你你想要的东西。

$('.title').click(function () {
   $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

也像Sushanth所说，如果你有一个新版本的jQuery，你可以使用.on（点击）

将单击侦听器添加到JQuery对象数组中

2 个答案: