jQuery 自动滚动到 DIV - 但自动滚动仅适用于第一页

Question

我正在创建测验网站，但遇到了一个令人困惑的问题。 因为只有在选择一个答案后才会显示解释 - 即“隐藏”元素，所以我将该元素包装到可见的 DIV 中。

我使用的代码很简单，在用户点击答案后自动滚动到可见的 DIV，其中包含解释。

我的自动滚动代码是：

var elem = $('.scroll');
            if(elem) {
            $(window).scrollTop(elem.offset().top).scrollLeft(elem.offset().left);
        }

问题：用户点击继续按钮后，在下一个问题上，选择答案后 -没有任何反应。 注意 - 继续按钮后没有页面刷新，整个测验都在同一个容器中，如 slider。

现场测验示例： 测验链接

Answer 1

我不知道您将在哪里绑定您的代码，但在示例站点中，每个继续按钮都必须将您的代码与它们自己'.scroll'元素绑定。

如果只是$('.scroll') ， jquery 选择器将找到所有.scroll class 元素（在示例站点中找到 40 个）并且offset() function 将首先使用所有.scroll元素（不是它们的有效索引）执行)

所以，例如，

第二个测验（本杰明富兰克林）中的继续按钮应该与第二个$('.scroll').eq(1)元素绑定。 不是$('.scroll') 。

var elem = $('.scroll').eq(0);
if(elem) {
 $(window).scrollTop(elem.offset().top).scrollLeft(elem.offset().left);
}

我无法在该页面中看到完整的源代码。 但也许您可以绑定一次事件并将索引分配给eq() 。

---

添加

我跟踪了事件并在“quiz-trivia.js”中找到了您的代码。

改变了一件事。

（大致写下我跟踪的并回答）

1. 点击回答。
2. 在'.wpvqgr-answer'点击事件上， wpvqgr.selectAnswer() function 将被执行。
3. 然后在selectAnswer()中，需要在同一区域中找到'.scroll'元素（例如：在第一页Albert Einstein中，第一个元素是 40 '.scroll' 。所以

// The function is given a parameter called question_id which indicating the question index. 
// we can find the same area .scroll with this index

// not $('.scroll').
var elem = $('.scroll').eq(question_id);

4. 将找到相同区域'.scroll' 。 在后面，您的代码将正常工作