将元素传递给函数，创建 id 变量，使用此变量平滑滚动到元素

Question

我正在尝试找出为什么会发生以下情况。

我正在尝试：

• 单击一个元素。

• 点击时，将 DOM 元素传递给函数。

• 在函数中使用此 DOM 元素来创建目标 ID。

• 平滑滚动到此目标 ID>

这是我的代码：

变量：

var productListQueryResult  = $('#product-list-query-result');

触发：

scrollToDiv(productListQueryResult);

功能：

// TO TOP OF ELEMENT
function scrollToDiv(e) {
    var el = e.attr('id');
    $('html, body').animate({
        scrollTop: $("#" + el).offset().top
    }, 300);
    console.log(el);
}
// END TO TOP OF ELEMENT

结果：

jquery.js?ver=1.12.4-wp:2 Uncaught Error: Syntax error, unrecognized expression: '#product-list-query-result'

虽然这个元素是存在的。如果我跑：

var e = jQuery("#product-list-query-result");
console.log(e);

我得到两行返回：

a.fn.init [div#product-list-query-result, context: document, selector: "#product-list-query-result"]
undefined

我不确定为什么我返回的第二行太“未定义”，谁能解释一下？

希望我已经提供了足够的信息，如果没有，请随时开始讨论。

编辑

我也试过了：

触发：

scrollToDiv(productListQueryResult.attr('id'));

功能：

// TO TOP OF ELEMENT
function scrollToDiv(e) {
    var el = "'#" + e + "'";
    $('html, body').animate({
        scrollTop: $(el).offset().top
    }, 300);
    console.log(el);
}
// END TO TOP OF ELEMENT

结果：

Uncaught Error: Syntax error, unrecognized expression: '#product-list-query-result'

编辑（解决方案）：

如果将变量传递给选择器，则不需要“”。

功能：

// TO TOP OF ELEMENT
function scrollToDiv(e) {
    var el = "#" + e;
    $('html, body').animate({
        scrollTop: $(el).offset().top
    }, 300);
    console.log(el);
}
// END TO TOP OF ELEMENT

我仍然很困惑为什么第一次尝试没有成功，为什么简单的测试返回了一个未定义的行？

Answer 1

对于您想要实现的目标，您的代码有点复杂。您正在将 jQuery 元素存储到 productListQueryResult 中，但随后您正在检索其 id 以便通过 id 再次获取它。

一个更简单的解决方案是：

// We already have the element.
var productListQueryResult  = $('#product-list-query-result');

scrollToDiv(productListQueryResult);

// TO TOP OF ELEMENT
function scrollToDiv(el) {
    // We don't need to get the element again, as we already have it.
    $('html, body').animate({
        scrollTop: el.offset().top
    }, 300);
    console.log(el);
}

至于为什么您的代码不起作用，您的第一次尝试对我有用，正如您在 fiddle 中看到的那样。

在您的第二次尝试中，您错误地计算了 id：

var el = "'#" + e + "'";

以这种方式，el 以值 "'#product-list-query-result'" 结束（注意单引号），这不是 jQuery 的有效选择器，因此出现 unrecognized expression 错误。

至于为什么你的console.log 中有undefined 行，这并不意味着你的HTML 元素不存在。与：

var e = jQuery("#product-list-query-result");
console.log(e);

你进入了控制台：

a.fn.init [div#product-list-query-result, context: document, selector: "#product-list-query-result"]
undefined

第一行是console.log(e) 的结果。

第二行的原因更好解释here。简而言之，console.log 命令的返回也会被打印出来。