Javascript 在jqueryajax调用过程中，错误地更新了存储体类列表的变量

我目前正在使用JQuery的Ajax请求函数创建一个脚本来处理Ajax页面转换。在Ajax函数的

success

回调中，我需要能够访问当前页面的

正文

类列表

，以及回调返回的

数据中
正文
的
类列表
。由于这个脚本在我的（Wordpress）站点的页面之间转换，我需要在Ajax
success
函数期间更新body类

下面是我的代码的一个非常简单的版本，让您大致了解我在做什么：

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.info
cameFromBodyClasses

变量检查其值

从主页导航到单个案例研究页面时，第一个和第二个

console.info

调用显示变量

cameFromBodyClasses

包含主页

body

标签的

classList

（因为我们来自主页）。但是，第三个

console.info

调用不同，它会打印我导航到的页面（单个案例研究页面）的

主体

类列表

，但它仍应打印主页的

主体

类列表

，因为变量在两次

console.info

调用之间没有任何改变

所以…

如何存储用户正在导航的页面的

正文

类列表

，并防止在Ajax调用过程中的任何时候对其进行更新/更改

---

我假设这与我正在创建一个新的

html

元素，并在第三个

控制台.info

之前更新其

主体
类列表
有关，但是我仍然不明白为什么这会改变
CamefromBodyClass
变量的值，因为它在函数期间（以及在ajax调用之前）只设置在一个点上
问题是变量
CamefromBodyClass
指向类列表，这是数组的一种形式。如果数组的内容发生更改，
cameFromBodyClasses
也将反映更改，因为它只指向数组，而不是它最初指向的唯一数组

考虑以下几点


var x=['a'，'b']；
变量y=x；
控制台日志（x，y）；
x、 推动（'c'）；
控制台日志（x，y）；
y=x.slice（0）；
x、 推动（'d'）；
控制台日志（x，y）
cameFromBodyClasses

指向主体上的类列表。所以当您更改

$（document.find（'body'）.attr（'class'，$（htmlObject.find（'body'）.attr（'class'））时，更改主体上的类，类列表将更改。因此，是的，您将看到这些变化。如果不想看到更改，则必须将类列表复制到不同的数组中；不要执行
$（文档）。查找（'body'）
。只需使用
$（document.body）
<代码>头

和

体

已经是

文档

上的属性。没有必要查找它们。@Taplar啊，好吧，太棒了，这很有意义，我只是简单地更改了行

let camefromBodyClass=elem.closest（'body'）.classList到
让CamefromBodyClass=[…元素最近（'body'）.classList]
将其转换为数组，现在使用
.includes（）
而不是
.contains（）
。请随便写下来作为答案，我会接受的：）