将元素传递给函数，创建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错误。

关于undefined中console.log行的原因，并不意味着您的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命令的返回，也将被打印出来。