Передача элемента в функцию, создание переменной id, использование этой переменной для плавной прокрутки к элементу - PullRequest
Новая
       22

Передача элемента в функцию, создание переменной id, использование этой переменной для плавной прокрутки к элементу

0 голосов
/ 13 февраля 2020

Я пытаюсь понять, почему происходит следующее.

Я пытаюсь:

  • Щелкните элемент.

  • При нажатии передайте элемент DOM в функцию.

  • Используйте этот элемент DOM в функции для создания целевого идентификатора.

  • Плавная прокрутка к этой цели 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

Я не уверен, почему мне возвращают вторую строку, слишком 'неопределенную', может кто-нибудь объяснить, что тоже?

Надеюсь, я предоставил достаточно информации, если нет, пожалуйста, не стесняйтесь начинать обсуждение.

Редактировать

Я также пытался:

TRIGGER : 

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'

РЕДАКТИРОВАТЬ (РЕШЕНИЕ):

Если Передавая переменную в селектор, вам не нужны символы "".

FUNCTION: 

// 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

Я все еще не понимаю, почему первая попытка не сработала и почему простой тест вернул неопределенную строку?

1 Ответ

1 голос
/ 14 февраля 2020

Ваш код немного сложен для того, чего вы хотите достичь. Вы сохраняете элемент jQuery в productListQueryResult, но затем извлекаете его 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 .

Во второй попытке вы неправильно вычислили идентификатор: 

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).

Почему вторая строка лучше объяснил здесь . В нескольких словах, это возвращение команды console.log, которая также печатается.

...