Хранение переменной classList неправильно обновляется во время вызова JQuery Ajax

Question

В настоящее время я создаю сценарий для обработки переходов страниц Ajax с помощью функции запроса Ajax JQuery.Внутри success обратного вызова функции Ajax мне нужно иметь доступ к body classList текущей страницы и classList из body в обратном вызове data.Поскольку этот скрипт перемещается между страницами моего (Wordpress) сайта, мне нужно обновить классы тела во время функции Ajax success.

Вот очень упрощенная версия моего кода, чтобы дать вам общее представлениеиз того, что я делаю:

function loadPageData(event, elem, eventType) {

    let _this = elem;

    // use this to determine where the transition comes from (i.e. to differentiate between home->single-casestudy and single-casestudy->single-casestudy etc...)
    let cameFromBodyClasses = elem.closest('body').classList;

    console.info('console test 1:', cameFromBodyClasses, cameFromBodyClasses.contains('home'));

    // Prevent the default behavior of clicking these links
    event.preventDefault();

    let th = eventType === 'menuLinkClick' ? $(_this) : $('.menu-main-container ul li.current-menu-item');
    let url = eventType === 'menuLinkClick' ? th.attr('href') : window.location.href;

    $.ajax({
        type: 'POST',
        url: url,
        dataType: "html",
        success: function (data) {

            console.info('console test 2:', cameFromBodyClasses, cameFromBodyClasses.contains('home'));

            let htmlObject = document.createElement('html');
            htmlObject.innerHTML = data;

            $(document).find('body').attr('class', $(htmlObject).find('body').attr('class'));

            let newBody = $(htmlObject).find('body');

            // this console.info is now different to the previous two...
            console.info('console test 3:', cameFromBodyClasses, cameFromBodyClasses.contains('home'));

            // the below if statement is being passed because cameFromBodyClasses.contains('home') is false at this point (but it shouldn't be)
            if (cameFromBodyClasses.contains('home') && newBody.hasClass('single-casestudy')) {

                // if coming from 'home' page and going to 'single-casestudy' page

                    // do unique transition animation here

            }
        }
    });
}


$(document).on('click', 'a[data-ajax="true"]', function (e) {

    loadPageData(e, this, 'menuLinkClick');

}

Проблема

Как вы можете видеть из упрощенного кода, у меня есть 3 раза, в которых я console.infocameFromBodyClasses переменная для проверки ее значения.

При переходе с домашней страницы на страницу отдельного случая первый и второй вызовы console.info показывают, что переменная cameFromBodyClasses содержит classList домашней страницы.body пометить как надо (потому что мы пришли с домашней страницы).3-й console.info вызов, однако, отличается и печатает body classList страницы, на которую я перехожу (страница с одиночным примером), но он все равно должен печатать body classList домашней страницы,так как переменная никак не изменялась между двумя console.info вызовами.

Итак ...

Как я могу сохранить body classList страницы, от которой пользователь уходит, и не допустить ее обновления / изменения в любой момент во время вызова Ajax?

Я предполагаю, что это как-то связано с тем, что я создаю новый html и обновляет его body classList до 3-го console.info, но я до сих пор не понимаю, почему это изменит значение переменной cameFromBodyClasses, так как она устанавливается только в одной точке во время функции (идо вызова AJAX)

Answer 1

Проблема в том, что переменная cameFromBodyClasses указывает на classList, который является формой массива. Если содержимое массива изменится, cameFromBodyClasses также будет отражать изменения, поскольку оно просто указывает на массив, а не на уникальный массив из того, на что он изначально указывал.

Рассмотрим следующее ...

var x = [ 'a', 'b'];
var y = x;

console.log(x, y);

x.push('c');

console.log(x, y);

y = x.slice(0);

x.push('d');

console.log(x, y);

Как видите, x и y указывают на один и тот же массив в памяти. Однако последний толчок не отражается у. Это связано с выполнением slice(), из-за которого y указывал на совершенно другой массив. Таким образом, нажатие на x не повлияет на y в этой точке.